select

Summary

One or more tokens that define the matching criteria for the distribution of child nodes of the shadow host.

Applies to	dom/HTMLContentElement

The select tokens define the matching criteria for distributing child nodes of the shadow host. Each token must be a valid selector fragment, which consists of the following:

• a selector that uniquely identifies the shadow host.
• a combination selector that identifies the parent element and the element at this insertion point.
• the following CSS3 selectors:
  • type selector
  • universal selector
  • class selector
  • ID selector
  • attribute selectors
  • The following pseudo-class selectors:
    • link
    • visited
    • target
    • enabled
    • disabled
    • checked
    • indeterminate
    • nth-child()
    • nth-last-child()
    • nth-of-type()
    • nth-last-of-type()
    • first-child
    • last-child
    • first-of-type
    • last-of-type
    • only-of-type

Examples

This example uses CSS selectors to select specific content from a shadow root.

<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 select=".email"></content>
  </div>
</div>

Related specifications

Shadow DOM

W3C Working Draft

Attributions

• Portions of this content come from HTML5Rocks! article