title: ::slotted CSS selector for nested children in shadowDOM slot
body: <p>The CSS <code>::slotted</code> selector selects children of the <code>&lt;slot&gt;</code> element.</p>
  <p>However, when trying to select grandchildren like with <code>::slotted(*)</code>, <code>::slotted(*) *</code>, or <code>::slotted(* *)</code>, the selector doesn't seem to take effect.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class MyElement extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'})
      shadowRoot.innerHTML = `
        &lt;style&gt;
          ::slotted(*) {
            display: block;
            border: solid blue 1px;
            padding: 3px;
          }
          ::slotted(*) span {
            display: block;
            border: solid red 1px;
            padding: 3px;
          }
          ::slotted(* span) {
            display: block;
            border: solid green 1px;
            padding: 3px;
          }
        &lt;/style&gt;
        &lt;slot&gt;&lt;/slot&gt;
      `;
    }
  }
  customElements.define('my-element', MyElement);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;my-element&gt;
    &lt;p&gt;
      &lt;span&gt;Test&lt;/span&gt;
    &lt;/p&gt;
  &lt;/my-element&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Note how the span doesn't get the border.</p>
  <p>Is this expected behavior? I wasn't able to find concrete documentation for this.</p>
  <p>If yes, is there a way to work around this?</p>