如何使用CSS ::part()定位Web Component Shadow DOM中的第N个元素

为什么原有写法无效？ #

::part()选择器的工作机制有严格限制：

• 伪类上下文不匹配：全局样式里的:nth-child/:nth-of-type是基于**<web-component>元素自身的子元素上下文**，而非Shadow DOM内部的input结构。Shadow Root里的input属于组件内部节点，全局样式无法感知它们的兄弟关系，伪类自然匹配不到。
• 类选择器无法穿透Shadow DOM：Shadow DOM内元素的类（比如input-3）对全局样式是隐藏的，web-component::part(input).input-3这种写法是在找**<web-component>元素自身带有input-3类**的part，而非内部input的类，完全不匹配。
• 语法规则限制：::part(input:nth-of-type(3))属于非法语法，伪类不能嵌套在::part()的括号内，必须写在::part()之后，但即便写法合规，依然受限于上下文问题无法生效。

可行解决方案 #

方案1：在Shadow DOM内部编写目标样式 #

直接在组件内部的<style>里添加针对特定input的样式，内部样式可以完全访问Shadow DOM的元素结构和类：

customElements.define("web-component", 
        class extends HTMLElement {
            constructor() {
                super();
                this.attachShadow({mode: "open"});
                this.size = this.getAttribute('size');
                this.template = document.createElement("template");
                this.template.innerHTML = '<style>'
                +':host {white-space: nowrap}'
                +'input {text-align:center;width: 3ch;height: 3ch}'
                +'input:not(:last-child){margin-right:.5ch}'
                // 新增内部目标样式
                +'input:nth-of-type(2) { background: #ff0000; }'
                +'input.input-3 { background: #00ff00; }'
                +'input:nth-of-type(5) { background: #ff00ff; }'
                +'</style>'
                this.render();
            }

            render() {
                this.shadowRoot.appendChild(this.template.content.cloneNode(true));
                for (let i = 0; i < this.size; i++) {
                    const input = document.createElement('input');
                    input.setAttribute('part','input');
                    input.classList.add('input-'+(i+1));
                    input.type = "text";
                    this.shadowRoot.appendChild(input);
                }
            }
        }
    );

全局样式保留通用part样式即可：

web-component::part(input) {
  border: 2px solid orange;
}

方案2：给元素设置多值part属性 #

给每个动态生成的input添加唯一的part名称（与通用part共存），全局样式通过唯一part直接选中目标元素：

// 动态生成input时修改part属性
for (let i = 0; i < this.size; i++) {
    const input = document.createElement('input');
    // 设置多值part：通用input + 唯一标识
    input.setAttribute('part', `input input-${i+1}`);
    input.classList.add('input-'+(i+1));
    input.type = "text";
    this.shadowRoot.appendChild(input);
}

全局样式直接用唯一part选择：

web-component::part(input) {
  border: 2px solid orange;
}
web-component::part(input-2) {
  background: #ff0000;
}
web-component::part(input-3) {
  background: #00ff00;
}
web-component::part(input-5) {
  background: #ff00ff;
}

方案3：通过CSS变量传递样式 #

在Shadow DOM内部定义CSS变量，全局通过:host选择器给特定元素传递样式值：

// 内部样式中使用变量
this.template.innerHTML = '<style>'
+':host {white-space: nowrap}'
+'input {text-align:center;width: 3ch;height: 3ch; background: var(--input-bg, transparent);}'
+'input:not(:last-child){margin-right:.5ch}'
+'</style>'

全局样式通过自定义属性传递：

web-component::part(input) {
  border: 2px solid orange;
}
web-component {
  --input-2-bg: #ff0000;
  --input-3-bg: #00ff00;
  --input-5-bg: #ff00ff;
}

内部render时给对应input绑定变量：

for (let i = 0; i < this.size; i++) {
    const input = document.createElement('input');
    input.setAttribute('part','input');
    input.classList.add('input-'+(i+1));
    input.style.setProperty('--input-bg', `var(--input-${i+1}-bg, transparent)`);
    input.type = "text";
    this.shadowRoot.appendChild(input);
}

内容的提问来源于stack exchange，提问作者user9011377