结合 ::slotted 与伪元素

Question

我试图弄清楚将伪元素与::slotted 选择器结合起来有什么用，看起来它适用于某些但不适用于其他选择器，我找不到任何列出它适用的选择器的文档

这是一个问题的演示，注意一些伪选择器是如何生效的，而另一些则没有

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);

<template>
    <style>
        
        ::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;
        }
    </style>
    <slot></slot>
</template>

<test-element>
    <p>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.</p>
</test-element>

<test-element>
    <input placeholder="Placeholder">
</test-element>

<test-element>
    <li>Li</li>
</test-element>

Answer 1

在 ::placeholder 和 ::marker 上找到很好的结果

但是::marker 在 Mozilla 的浏览器中不起作用（没有测试过 safari）

一般::slotted()只需要一个简单的选择器；
见：::slotted CSS selector for nested children in shadowDOM slot

旁注：您的constructor 可以写成：

constructor() {
  let template = document.querySelector("template"); // valid code *before* super()
  super() // sets and returns this scope
    .attachShadow({mode: 'open'}) // sets and returns this.shadowRoot
    .append(template.content.cloneNode(true));
}