There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

create-element

Syntax

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

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>.

observe(attribute) = 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, and activating the custom Active CSS events "connectedCallback", "disconnectedCallback" and "adoptedCallback" and attribute change events so they can be used in your config.

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.

The "connectedCallback", "disconnectedCallback" and "adoptedCallback" events then become available, and are used like this:

custom-square:connectedCallback {
    do something
}

You get these events in addition to the regular ones available when building components;

These events are exactly the same ones as used natively, and they follow exactly the same behaviour as native JavaScript:

Reference: https://developer.mozilla.org/en-US/docs/Web/Web_Components#Custom_elements

In native JavaScript there is also an "attributeChangedCallback" event that fires whenever an observed attribute changes. However, 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.