dom

Overview

The osagai/dom module has functions responsible for manipulating the DOM tree of the custom element. Use this module if your custom element will need to update the data and efficiently update the DOM.

• update

Update DOM elements

Usually, our components needs to be updated reflecting the data passed in the Templatefunction into the DOM. This could not be so performant if we always use innerHTMLfor reflecting the template defined. For that reason, osagai use a library calledmorphdom that change only the elements in the DOM that differentiate from the previous state. Note: If you use a customrenderer in the define function, the update function will use that custom renderer instead of mophdom.

update

update(element, dataChanger) => Promise(newData)

Updates the data of the Component, scheduling a new change in the DOM using the renderer (default to morphdom) and return a promise with the new data returned by the dataChanger.

Parameters

element

Instance of the osagai element

dataChanger

Function that receive as parameter the data that needs to be changed and needs to return the new data. This could also be a promise that will be resolved by the update function.

Example

update(element, (data = {}) => {
  data.changed = true
  return data
})

Async function

update(element, async (data = {}) => {
  const items = await api.getItems()
  data.items = items
  return data
})

attachShadow

attachShadow(element, [shadowRootInit]) => ShadowRoot

Adds a shadow DOM tree to the specified element and returns the attached ShadowRoot

Parameters

element

Instance of the osagai element

shadowRootInit

An object that contain the following field:

• mode: A string specyfing the encapsulation mode for the shadow DOM tree.
  • open [default]: Elements from the shadow dom are accessible with the property element.shadowRoot
  • close: Elements from the shadow dom are not accessible

Example

const openShadowRoot = attachShadow(element)
// element.shadowRoot === openShadowRoot

const closedShadowRoot = attachShadow(element, { mode: 'close' })
// element.shadowRoot === null