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.

Shadow DOM - basic

Here is a simple example of setting up a shadow DOM on a custom-made host element.

You don't have to use custom elements to set up a shadow DOM, but this technique of having a specially named element is common when working with web components.

Every shadow DOM tree needs a host element, and you can only have one shadow DOM tree per host element.

Shadow DOMs can either have modes of "open" or "closed". You'll need to look that up on the interwebs if you want to know the difference - it's a native thing. Shadow DOMs are "open" by default in Active CSS, and the open parameter in the example below is optional.

In this example the custom element is officially registered in the browser as a valid element after it is drawn on the page, hence the create-element command is inside the draw event of the element itself. You can actually use any custom tags without registering them for the browser, but technically they have an "undefined" status in the browser and browser behaviour of unregistered elements may change in the future, so it is good to register them. Custom elements only get registered once, even if the create-element command is run more than once.

Note: In the example below, the code editor inserts the Active CSS to load into the code editor iframe as an inline style, ie. <style type="text/acss"></style>. As you cannot have nested style tags in the browser yet we want CSS for the component, the workaround in Active CSS for inline is to use the <acss-style></acss-style> tag instead. You only have to do that when you are setting styles in inline Active CSS. In normal loaded config you can just use the regular <style></style> tag in your components.

Shadow DOM in custom element