Why is ::part() not working for slotted Stencil elements?

Question

My HTML:

<my-dropdown label="dropdown" size="m" filter="true">
    <select slot="filter" part="myselect">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
</my-dropdown>

Inside the my-dropdown components, I have a slot:

<slot name="filter" />

The css stylesheet is inside the component, and in it, I have defined:

my-dropdown::part(myselect) { 
..
}

The styles do not apply to the component? Why? Am I not doing it correctly?

Answer 1

Simple answer: Because it's not meant to work on slotted elements .

The CSS parts ::part() pseudo-element selector is used to apply style to elements that are within shadow DOM which use the part attribute.

In your example, you have added the part attribute to the element <select slot="filter" part="myselect"> which is in light DOM not shadow DOM.

Note that slotted elements are not actually moved to the shadow DOM; their position in the DOM is not affected by the slotting mechanism so they exist in regular light DOM like any other element. They are just rendered inside the shadow DOM structure of the parent web component, with both the component's shadow DOM style for that slot ( ::slotted() ) and any regular DOM styling eg global stylesheet applied.

In order for the my-dropdown::part(myselect) selector to work, the element that has the part="myselect" attribute would have to be inside the shadow of the my-dropdown component - for example:

@Component({
  tag: 'my-dropdown',
  styleUrl: 'my-dropdown.scss',
  shadow: true,
})
export class MyDropdown {
  render() {
    return (
      <Host>
        <div part="myselect">
          <slot name="filter" />
        </div>
      </Host>
    );
  }
}