Question

My <web-component></webcomponent> 很简单,一系列的<代码>和>;投入类型=“text part=“input”/>直接载于<代码>#shadow-root。

I can style them all at one without any troubles with:

web-component::part(input) {
  border: 1px solid #000
}

但是,如果我想要把具体投入作为目标,那么这两项工作都没有:

web-component::part(input):nth-child(3) {}
web-component::part(input):nth-of-type(3) {}
web-component::part(input).input-3 {} /* with class properly defined in the web component */
web-component::part(input.input-3) {}
web-component::part(input:nth-of-type(3)) {}
...

找不到这方面的文件。

EDIT :我不得不指出,投入没有排位,而是动态地重新产生。

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} 
                + </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);
                }
            }
        }
    );

web-component::part(input) {
  border: 2px solid orange;
}
web-component::part(input):nth-child(1) {
  background: #ff00ff;
}
web-component::part(input):nth-of-type(2) {
  background: #ff0000;
}
web-component::part(input).input-3 {
  background: #00ff00;
}
web-component::part(input.input-4) {
  background: #00ffff;
}
web-component::part(input:nth-of-type(5)) {
  background: #ff00ff;
}
web-component::part(input:nth-chlid(6)) {
  background: #ff0000;
}

<web-component size="6"></web-component>

Answer 1

不能这样做。 https://drafts.csswg.org/css-shadow-parts/#part”rel=“nofollow noretinger”>cs-shadow-parts spec:

• 部分(a) 树冠或与<相匹配的树冠信息而不是当地元素信息相匹配的整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整,之后可再加。

你们正在尝试的所有选用人要么不是以树木信息为基础的假歌或假歌。

幸运的是,地名与班级类似:多个要素可以有相同的名称,单一部分可以有多个部分名称。 (从同样的角度看)

因此,您可以使用多种名称,如<代码>输入-1。

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} + </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- +(i+1)); input.type = "text"; this.shadowRoot.appendChild(input); } } } );

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

<web-component size="6" id="shadow-dom-host"></web-component>

友情链接