BaseComponent

class BaseComponent()

The base component class which implements most of the web components magic and inherited by each component itself.

All components can be accessed through the meta object.

BaseComponent.customContext

The custom context for the usage in templates, injected in the buildContext() method.

Hint

This method can be overwritten in the concrete component classes in case they need some custom context.

BaseComponent.defaultData

The default data, which is used when no data attribute is defined.

Hint

This method can be overwritten in the concrete component classes in case they need some default data.

BaseComponent.buildComponentAttributes()

Build the component attributes.

Returns:

Object – The component attributes

BaseComponent.buildContext(element)

Build the context for the usage in templates, such as the text & attribute interpolations, for loop expressions & conditional validations.

By default the context includes these keys:

  • attributes: The component’s attributes

  • component: The component’s name

  • data: The component’s data

The method will also inject the loop context set by renderLoopElement() and the customContext().

Arguments:

  • element (HTMLElement) – The HTML element

Returns:

Object – The context

BaseComponent.connectedCallback()

Callback which is automatically called by the browser when the component is inserted into the DOM. This will trigger the reloadData() and fetchData() methods.

BaseComponent.fetchData(dataURL)

API to fetch the data from a REST backend with the dataUrl URL. If no dataUrl is defined, the URL is read from the element’s data-url attribute.

This will delegate the data update to updateData().

Arguments:

  • dataURL (String) – The data URL

Returns:

Promise – The promise with the data

BaseComponent.handleEventListener(element)

Handle an element with an event listener, namely an element with a t-on attribute and the following value / syntax:

"{originalEvent}:{customEvent}"

The method will then register an event listener for the original event, which dispatches a new Translucent-specific ComponentEvent().

Arguments:

  • element (HTMLElement) – The conditional element

BaseComponent.interpolateAttributes(element, context)

Interpolate all attributes of an element via interpolate().

Arguments:

  • element (HTMLElement) – The HTML element

  • context (Object) – The context

BaseComponent.interpolateTextContent(element, context)

Interpolate the text content an element via interpolate().

Arguments:

  • element (HTMLElement) – The HTML element

  • context (Object) – The context

BaseComponent.reflectAttributes(attributes, elements, targetCallback, valueCallback)

Reflect some attributes to element attributes.

This is achieved by looping over all elements & attributes, and by reflecting the values received by valueCallback to the target element received by targetCallback.

Note

The targetCallback can be used to define the target element to which the attributes should be reflected to. For example:

element => element.querySelector('div#target')

The valueCallback can be used to lookup & define the value which should be used for the reflected attribute. For example:

(element, attribute) => this.exampleGetter(attribute)

Please note, if the returned value is boolean false, the attribute will not be set and skipped.

Arguments:

  • attributes (Array) – The list of attributes to reflect

  • elements (NodeList) – The list of elements to loop over

  • targetCallback (function) – The callback which returns the target element

  • valueCallback (function) – The callback which returns the attribute value

BaseComponent.reflectComponentAttributes(attributes, elements)

Reflect some component attributes to element attributes.

This is achieved by looping over all elements and by reflecting all attributes from the component to them.

Arguments:

  • attributes (Array) – The list of attributes to reflect

  • elements (NodeList) – The list of elements to reflect the attributes to

BaseComponent.reflectDataProperties(attributes, elements, targetCallback)

Reflect some data properties to element attributes.

This is achieved by looping over all elements and by reflecting all attributes from the element’s data to the element received by the targetCallback.

Arguments:

  • attributes (Array) – The list of attributes to reflect

  • elements (NodeList) – The list of elements to loop over

  • targetCallback (function) – The callback which returns the target element

BaseComponent.reloadData()

Reload the data from the data-data attribute.

In case no data is defined in the data-data attribute, the default data from the defaultData() getter is loaded instead.

This will delegate the data update to updateData().

Returns:

Object – The data

BaseComponent.render()

Render the web component to the shadow DOM.

This method is basically a wrapper for:

  • Clearing the this.shadowRoot inner HTML

  • Adding the style of style() to the shadow root

  • Render the template of template() via renderElement()

  • Add the rendered template to the shadow root

BaseComponent.renderElement(element)

Render a HTML element.

This is where basically all the magic happens, or at least where the magic starts. The render() method will initially pass the template() to this method. This method will then recursively call itself for each child found in the element.

Hint

The method will delegate several actions to other methods.

Arguments:

  • element (HTMLElement) – The HTML template element

Returns:

HTMLElement – The rendered HTML element

BaseComponent.renderLoopElement(element, context)

Render a loop element, namely handling an element with a t-for attribute. The loop element can return 0+ elements.

Arguments:

  • element (HTMLElement) – The HTML element

  • context (Object) – The context

Returns:

Array – The generated elements based on the data

BaseComponent.updateData(data)

API to update the data and re-trigger the rendering via render().

Arguments:

  • data (Object) – The data

Returns:

Object – The data

BaseComponent.validateConditionalElement(element, context)

Validate a conditional element, namely an element with a t-if attribute. Evaluate the expression via cleanContextEval().

Arguments:

  • element (HTMLElement) – The conditional element

  • context (Object) – The context

Returns:

Boolean – The condition success