Naming ::content

The CSSWG has an issue open on the naming of the ::content pseudo-element being too general for its ShadowDOM-specific use. We would like to poll authors on their preferences.

What this pseudo-element does is, it allows selecting items that have been pulled in from the light DOM and projected through the shadow tree.

<div id=web-component>
  <p class=normal>I’m a normal child! I’m hidden because there’s a shadow root attached to the component.</p>
  <p class=selected>I’m another child. I’m shown because the shadow root selects me.</p>
</div>

<::shadow> /* attached to #web-component */
  <p class=shadow>I’m in the shadow tree. I get shown, along with whatever the <content> element selects.</p>
  <content select="p.selected"></content>
  <style>
    p { color: blue; } /* styles only the p.shadow element */
    ::content p { color: green; } /* styles only the p.selected element */
  </style>
</::shadow>

The three options under consideration are:

::content

Because it is referencing the content pulled into the shadow through the <content> ShadowDOM element. (This is the current name for the pseudo-element.)

::light-content

Because it references <content> but also the fact that this is pulled from the light DOM tree

::projected

Because we are referencing content that does not directly belong to the light DOM, but is rather projected through the shadow tree's manipulations (selection, reordering, etc.).