Hooks & properties The advanced API is used to create more advanced Modjool elements. This is a list of hooks and properties available to the advanced API within modjool.create(). The HTML tag name for the autonomous custom element. Required. The HTML specification provides the following rules for custom element names: These characters are allowed: [a-z], [0-9], '-', '.', '_' --- The first character must be [a-z] --- Must contain a hyphen '-'
modjool.create({ tag: 'custom-element' })
modjool.create({ tag: 'custom-element', attr: ['title', 'main-text'] }) modjool.create({ tag: 'custom-element', html: ({ slot }) => ` <div>${slot}</div> ` }) The custom CSS of the element. This is a function that returns a string. While scopedCss is enabled, all CSS is scoped by dynamically modifying each CSS selector. Custom :self and :self()selectors compatible only within this hook (:self uses ths self.select() function, more info). Optional. modjool.create({ tag: 'custom-element', css: ({ attr }) => ` /* Selects div elements within the current element */ div { color: ${attr.color}; } /* Selects custom-element itself */ :self { font-size: 16px; } /* Selects custom-element if it has the "large" attribute */ :self([large]) { font-size: 20px; } ` }) modjool.create({ tag: 'custom-element', enter: ({ self }) => { console.log(`Constructing element ${self.id}...`) } }) // Surrounding the result of an arrow function in parentheses returns the result as an object modjool.create({ tag: 'custom-element', data: ({ slot }) => ({ slotContent: slot.map(curr => `<div>${curr}</div>`).join('') }), html: ({ data }) => ` ${data.slotContent} ` }) modjool.create({ tag: 'custom-element', ready: ({ attr }) => { console.log(`Element ready. Size attribute is: ${attr.size}`) } }) modjool.create({ tag: 'custom-element', js: ({ self }) => { console.log(`A ${self.tag} element has been added to the DOM`) } }) modjool.create({ tag: 'custom-element', js: ({ data }) => { // Initial value for text data.text: 'Inside js' } complete: ({ data, self }) => { // html WILL NOT react and update when data is changed synchronously within complete data.text = 'Inside complete' // 'Inside complete' (the value still changes) console.log(data.text) elem.onclick = event => { // html WILL react and change, because it is part of an event, called later data.text = 'Inside event' } }, html: ({ data }) => ` Click me! ${data.text} ` }) modjool.create({ tag: 'custom-element', leave: ({ self }) => { console.log(`A ${self.tag} element has been left the DOM`) } }) Lifecycle hook, called every time an attribute has changed. The hook name begins with attr_ and is followed by the (camel case converted) attribute name. For example, the hook name for list-title="", (accessible through attr.listTitle) will be attr_listTitle. Contains two extra parameters: newVal and oldVal. These new parameters are, respectively, the new and the previous value for the changed attribute. Followed by a build step, then a call to complete(). Optional. <custom-element color="red"></custom-element> modjool.create({ tag: 'custom-element', // Called when the value for color="" changes to another value, through any means attr_color: ({ newVal }) => { console.log(`The new attribute value for color is ${newVal}`) } }) Lifecycle hook, called every time an data property has changed. Optionally can return a value to be set as the data property. The hook name begins with data_ and is followed by the data property name. For example, the hook name for data.displayList will be data_displayList. Contains two extra parameters: newVal and oldVal. These new parameters are, respectively, the new and the previous value for the changed attribute. Followed by a build step, then a call to complete(). Optional. modjool.create({ tag: 'custom-element', data: () => ({ count: 0 }), complete: ({ data, elem }) => { elem.onclick = () => data.count++ } // Called when the value for data.count changes, through any means data_count: ({ newVal }) => { console.log(`The new value for data.count is ${newVal}`) } })
Updating the property on every change modjool.create({ tag: 'custom-element', data: () => ({ title: 'Default title' }), js: ({ data }) => { data.title = 'I like apples', }, // ' is the new title' is appended to data.title on every change data_title: ({ oldVal, newVal }) => { // 'Default title' console.log(oldVal) return newVal + ' is the new title' }, html: ({ data }) => ` ${data.title} ` }) <custom-element></custom-element> I like apples is the new title modjool.create({ tag: 'custom-element', shadowDom: true, // Any settings can be placed here html: () => ` The shadow DOM is enabled ` })