title: Combining ::slotted with pseudo-elements
body: <p>I'm trying to figure out what's the deal with combining pseudo-elements with the <code>::slotted</code> selector, looks like it works with some but not with others and I can't find any documentation listing the selectors it works with</p>
  <p>Here is a demonstration of the problem, notice how some pseudo-selectors take effect while others don't</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 TestElement extends HTMLElement {
      constructor() {
          super();
          this.attachShadow({mode: 'open'});
          let template = document.querySelector("template");
          this.shadowRoot.append(template.content.cloneNode(true));
      }
  }
  
  customElements.define("test-element", TestElement);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;style&gt;
          
          ::slotted(*)::first-line { /* doesn't works */
              color: red;
          }
          ::slotted(*):first-letter { /* doesn't works */
              color: red;
          }
          ::slotted(*) {
              max-height: 3em;
              overflow: auto;
          }
          ::slotted(*)::-webkit-scrollbar { /* doesn't works */
              width: 3px;
          }
          ::slotted(*)::-webkit-scrollbar-track { /* doesn't works */
              background-color: red;
          }
          ::slotted(*)::selection { /* doesn't works */
              color: red;
          }
          ::slotted(*)::placeholder { /* works */
              color: red;
          }
          ::slotted(*)::marker { /* works */
              color: red;
          }
      &lt;/style&gt;
      &lt;slot&gt;&lt;/slot&gt;
  &lt;/template&gt;
  
  &lt;test-element&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
      doloribus ullam fugit ipsum laborum velit architecto, provident dolore
      at, aperiam quaerat officiis aliquid magni sed expedita totam dolor
      doloremque odit.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
      doloribus ullam fugit ipsum laborum velit architecto, provident dolore
      at, aperiam quaerat officiis aliquid magni sed expedita totam dolor
      doloremque odit.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
      doloribus ullam fugit ipsum laborum velit architecto, provident dolore
      at, aperiam quaerat officiis aliquid magni sed expedita totam dolor
      doloremque odit.&lt;/p&gt;
  &lt;/test-element&gt;
  
  &lt;test-element&gt;
      &lt;input placeholder="Placeholder"&gt;
  &lt;/test-element&gt;
  
  &lt;test-element&gt;
      &lt;li&gt;Li&lt;/li&gt;
  &lt;/test-element&gt;</code></pre>
  </div>
  </div>
  </p>