Search code examples
polymerweb-componentshadow-dom

Polymer/shadow dom universal selector with selectors

I'm trying to understand the specification for Polymer and shadow dom i.e. http://w3c.github.io/webcomponents/spec/shadow/#distribution-algorithms and how content insertion points with a selector work with a universal selector.

The specification is difficult to follow so I'll explain what I'm trying to understand (this is copying/quoting from http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)

I have a document:

<div id="nameTag">
   <div class="first">Bob</div>
   <div>B. Love</div>
   <div class="email">bob@</div>
</div>

And a shadow root with selectors:

<div style="background: purple; padding: 1em;">
   <div style="color: red;">
      <content select=".first"></content>
   </div>
   <div style="color: yellow;">
      <content select="div"></content>
   </div>
   <div style="color: blue;">
      <content></content>
   </div>
</div>

Notice I've changed the html5rocks example to a universal selector at the end i.e. <content></content>

What is the expected behaviour here?

Are content insertion points with a selector allowed along side a universal selector?

Will the universal selector assume any leftover host nodes (not sure if that is the right description).

FYI, I could be incorrectly describing the terminology, it's a difficult specification to read.

Solution

  • Yes, you can use content blocks with a universal selector alongside custom ones. This is actually quite common. Content blocks get access to the children in order, so a universal selector means all nodes not inserted previously will be inserted there. In this case, the <content select="div"> will select the last two children, so your universal <content> will get none.