Declarative Shadow DOM to encapsulate

Issue

I am trying to use Declarative Shadow DOM to encapsulate a header on a web-page.

    <host-element>
        <template shadowrootmode="open">
            <style>
                .button {
                    background-color: green;
                }
            </style>
            <slot></slot>
        </template>
        <div>
            <div class="button">Button one</div>
            <div class="button">Button two</div>
        </div>
    </host-element>

In the code above I would expect the two buttons to be green, but that is not the case.

Solution

slotted lightDOM content is NOT MOVED to shadowDOM

Thus you can not style lightDOM FROM a shadowDOM <style>

One exception: ::slotted can only style your outer DIV (also known as the "lightDOM skin")
See dashed blue in snippet below

You style lightDOM from the container it is in. In this case global DOM

very long answer: ::slotted CSS selector for nested children in shadowDOM slot

<style>
 .button {
   margin: 1em;
   background: lightgreen;
 }
</style>
<host-element>
        <template shadowrootmode="open">
            <style>
                ::slotted(div) {
                  margin: 1em;
                  border: 2px dashed blue;
                }
            </style>
            <slot></slot>
        </template>
        <div>
            <div class="button">Button one</div>
            <div class="button">Button two</div>
        </div>
</host-element>

Answered By - Danny '365CSI' Engelman