How to target the Nth element in a webcomponent shadowDOM with CSS ::part()

Unfortunately, it's not possible to target the Nth element in a web component's shadow DOM directly using the CSS ::part() pseudo-element. This is because ::part() doesn't support structural pseudo-classes like :nth-child() or :nth-of-type(), which are required for targeting specific elements based on their position within a tree structure.

According to the CSS Shadow Parts specification:

The ::part() pseudo-element can take additional pseudo-classes after it, such as x-button::part(label):hover, but never matches the structural pseudo-classes or any other pseudo-classes that match based on tree information rather than local element information.

However, there's a workaround that you can use to achieve a similar effect. Since part names act similarly to classes, you can assign multiple part names to an element, separated by spaces. This allows you to apply different styles to elements based on their part names.

Here's an example:

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

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

In this example, the web-component custom element defines a shadow DOM that contains a series of <input> elements. Each <input> element is assigned two part names: "input" and "input-(number)". The CSS rules then target the elements based on their part names, applying different styles to the first input and all other inputs.

While this workaround doesn't allow you to target the Nth element directly, it does provide a way to apply different styles to specific elements within the shadow DOM based on their position.

It's important to note that this workaround relies on the fact that part names act similarly to classes. If the CSS Shadow Parts specification changes in the future to disallow multiple part names or change their behavior, this workaround may no longer work.