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.
Note: In the example below, the code editor inserts the Active CSS to load into the code editor iframe as an embedded style tag, 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 embedded is to use the <acss-style></acss-style> tag instead. You only have to do that when you are setting styles in embedded Active CSS. In normal loaded config you can just use the regular <style></style> tag in your components.
You can also import CSS as an option in the @component syntax.