create-element

Syntax

create-element: (element/tag name) [associated component name] [observe(attribute[, attribute, ...]) [after (time)][, (element/tag name)...];

Important note: As of version 2.10.0, create-element is not required to set up custom element components. All that is now handled in the upgraded @component syntax. However, the create-element command will remain in the core and is not flagged for deprecation.

If you want to create a custom element component, check out the docs pages for components.

 

element/tag name = The name of the custom element you want to create, eg. "address-card". You are not adding an element to the DOM - you are merely registering its use with the browser. This is the name of the tag you are creating, so in this case you are creating <address-card></address-card>.

associated component name = Optional. The name of the component to associate to this tag that will be drawn inside the tag when it is rendered.

observe(attribute) = Optional. The name (or space delimited list) of the attribute(s) that you want to use in a shadow DOM component for data-binding. This parameter can be left out entirely if no data-binding is needed.

Important: Custom element tag names and attributes must be lower-case and at least two words separated by a hyphen.

By creating the element you are officially registering the element type in the browser.

Example:

create-element: custom-square observe(len col);

This registers the element <custom-square></custom-square>, and allows the len and col attributes to be observed for changes so that any data-binding on variables tied to these attributes, and any attribute change events that are needed, can be fired.

Whenever an attribute changes in Active CSS there is an event fired that is based on the attribute itself that is changed.

For example, for this HTML:

<my-element data-my-attribute="cheese"></my-element>

Whenever the "data-my-attribute" attribute changes, this event below is fired:

my-element:attrChange-data-my-attribute {
    do something
}

You can then find the new value of the attribute in this event by using "{@data-my-attribute}" as per usual.

If you need the value prior to the change, a new attribute will automatically be in the HTML tag with "-old" on the end of it, so in the above case you can get the old value by using "{@data-my-attribute-old}".

Note: You cannot currently create an element of a pre-determined element type, eg. you cannot create an element of the type "button". This is not yet a widely supported native feature, so it has not been implemented in Active CSS.

See this page for an example in action, or the components documentation.