Attributes / Updating from DOM

While changing attribute values in the component (in Javascript code) automatically updates the corresponding DOM elements and their html-attributes, the reverse is not the case. You'll need to manually call a updateAttrsFromNodes() method in order to read values from DOM.

This, for example, is useful on component initialization: after your page loads, you want the initial values for Component attributes to be set not from your code, but from the DOM. A simple way to do this is to call this method in the afterInitialize() hook.

You can specify which attributes to update by passing an array with attribute names as an argument, for example:

export class MyButtonComponent extends extend_as("MyButtonComponent").mix(Component).with() {
  constructor()     { this.attribute_names = ["caption", "button_type"];     }
  afterInitialize() { this.updateAttrsFromNodes({ attrs: ['button_type'] }); }
}

Upon component initialization, this will read button_type value from the DOM, but not caption.

Note: if the value in the DOM is an empty string or a string consisting entirely of whitespace, component's attribute value will be set to null. If the value is undefined (means html-attribute doesn't exist), then the same undefined value will be assigned to the component attribute. This is a customizable behavior, for more information refer to attributes casting section.