This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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:

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