Shadow DOM components

Shadow DOMs are part of the native web component tooling. They provide an area on the page which is isolated from the rest of the page. They don't inherit much CSS from the main page, and you cannot easily select elements inside the shadow DOM area from outside.

You mainly only need to use them when you need isolated CSS, and if you especially don't want outer CSS selectors selecting what you have set up in the shadow DOM area. This is great if you want to build a re-usable component that will work on any web page. You can even give a shadow DOM area its own stylesheet.

In native terms, a shadow DOM can be attached to an element on the page. It creates a shadow DOM area inside the host element. Any one element can contain other elements inside it, including a shadow DOM area, but it can only have one of these shadow DOM areas attached. Essentially, each shadow DOM area has its own host element.

In Active CSS, creating a shadow DOM component is as simple as adding the option shadow to a component.

This will turn it into a shadow DOM area.

Example of a shadow DOM component with its own stylesheet:

body:init {
    render-after-begin: "<hello-world></hello-world>";
}

@component hello-world shadow {
    html {
        <link rel="stylesheet" href="/css/myShadowStylesheet.css">
        <p>Well, hello!</p>
    }
}

Shadow DOM components automatically have a strictlyPrivateEvents scope option so you don't have to type it, because elements in shadow DOM areas natively have their own DOM which is separate from the main document DOM.

Everything else in Active CSS regarding components should work exactly the same way for shadow DOM components as non-shadow DOM components.

Variable use in components is a completely separate scoping issue in Active CSS and has its own rules and has nothing to do with whether or not a component is in a shadow DOM area or not.

Using embedded styles in a shadow DOM component

If you are using embedded Active CSS - ie. you are inserting Active CSS onto the page with <style type="text/acss"></style>, then you cannot use the <style> tag again inside as it will not render correctly in the browser. In this scenario use the tag <acss-style></acss-style>. It's a workaround so that embedded Active CSS can work.

For config that is loaded normally, you can use the regular <style></style> tags in your component for your embedded CSS styles like usual HTML.

Open or Closed Shadow DOM components

With shadow DOMs, there is a native optional setting to set the shadow DOM as open or closed. From the Google reference site: "There's another flavor of shadow DOM called 'closed' mode. When you create a closed shadow tree, outside JavaScript won't be able to access the internal DOM of your component."

https://developers.google.com/web/fundamentals/web-components/shadowdom

The default option (if no option is specified) is the open option. If you want closed, use the closed option on the @component line.

Does it matter? Most of the time, probably not. It depends whether you want outside JavaScript to be able to get into your shadow DOM component or not.

Active CSS will work with the events written for your component regardless of the open/closed external state set for the shadow DOM.