attribute is used for DCE attributes declaration and track the attributes changes. It also be used by IDE and validation.

The attribute can be changed by component itself and used as output to the container. Usual case is when value attribute is updated from inside.

Initial value of attribute is available on the attributes node attribute as in /datadom/attributes/@attr1

The current, i.e. including the changes by component itself, attribute value is a child node of attributes as in /datadom/attributes/attr1.

To define the attribute which is modified from within, the 3 parts are usually used as in //s[//s/event] ?? //attributes/@v ?? 'def'

  1. //s[//s/event] the slice s with event gives the slice value which was modified by user event like input
  2. //attributes/@v the attribute passed by container
  3. 'def' the default value which used when no user input or attribute set by container

attribute is used for DCE attributes declaration and track the attributes changes. It also be used by IDE and validation.

When slice value points to attribute, it would be populated on slice change.
Type in the input field to see the variable $title change.
Hover the mouse to see the title attribute text popup.
Inspect DCE node in dev tools to see `title` attribute updated while typing.

Attributes processing To be available in template, custom-element attributes should be defined by attribute markup as shown above. The value is taken from attribute text content or from select XPath expression
Declared in such way, attributes are exposed via observedAttributes.
The template exposes those attributes as xsl:param which makes the attribute value available as xsl variable (as attribute name prefixed with $).
After transformation the attributes values are read from CE root and copied into DCE component.
The DCE attribute change from outside invokes attributeChangedCallback which triggers DCE re-render.

The value attribute is usual case to be propagated from within of custom-element. See the using custom-element as form input example.

• Design docs