So I wrote the following code for an article I am writing: http://codepen.io/anon/pen/dPeYGN (Which is just a clean up of something I posted here).

Scoping through the shadow

Having selectors from the outside looking through a shadow DOM route I would expect the above code to not be all in red.

my-element {
  color: red;
}

Rendered HTML DOM nodes:

<my-element>
  <"shadow-tree">
    <span>My title</span>
    <content>
      <span>My content</span>
    </content>
  </>
</my-element>

I would not expect “My title” to be in red text.

Scoped styles

In both CSS scoping and Shadow DOM there seems to now be a lack of wording around scoped styling within the shadow DOM.

So given:

<div>
  <"shadow-tree">
    <b>Text 1</b>
    <style>
      b { color: purple; }
    </style>
  </>
</div>
<b>Text 2</b>

“Text 1” should only be purple right?

I do remember reading that a <style> within a shadow tree behaves the same way as a <style scoped> however given that implementers are removing support for that I assume that is why the wording got dropped. However I think it would be good to be specific that the styles register on the ShadowRoute.StyleSheetList scoped to only this tree and not the document.

I assume @tabatkins will know the current behaviour of these two examples.

Why would you think it’s not red? Selectors don’t reach inside the shadow DOM, but inheritance still applies.

@tabatkins I thought the main advantage would be that it would be much simpler to avoid cascading styles impacting a component unless specifically used to style them.

So assuming we have a component my-component built from a template which is inserted into a shadow DOM on construction:

<template id="mycomponenttemplate">
  <div class="me">
     <content></content>
  </div>
</template>

And usage template like:

<div class="my-post">
  <my-component>
    Test 1
    <div class="control">
      <my-component>
        Test 2
      </my-component>
    </div>
  </my-component>
</div>

div { //targets just .my-post and .control background: red; } my-component::shadow div { //targets just .me elements background: green; }

The advantage is that template authors wouldn’t need to worry about the contents of the shadow DOM in their styles (Unless they wanted them to with ::shadow or >>>). The problem is that I don’t expect ::content would work here either as in the case above as the selectors would likely style the second component styles.

---

I was right about styles declared within the shadow DOM are only applicable to it and it’s children and not the document, right?

Yes, styles declared inside the shadow DOM don’t escape out, and styles declared outside the shadow DOM don’t reach in (unless you explicitly pierce the shadow). It’s only inheritance that still works across shadows, and that’s intentional.

That is fair enough, as I as a component author could essentially CSS reset to make sure that things like that didn’t leak into my shadow if I so chose.

Anyway thank you, I just wanted to clarify with you before I finalised my article.