How do I add a class to a slotted element?

In my my-dropdown component in Stencil, I have this:

<slot name="filter"  />

In my HTML, I have this:

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

The class inf__dropdown-select is defined in the stylesheet of the component, and it used to be applied to the select element inside the component.tsx, but since I need to slot it now, I replaced the select element with a single <slot name="filter" /> slot, but now I don't know how do I apply the class? If I add the class to the slot inside the component, it's not being applied. I thought adding it to the element that you are slotting would work, but it doesn't. How do I make sure the class is applied to the slotted select element?

You have implemented the inf__dropdown-select style class inside shadow DOM (the style for my-dropdown), but the class is being set on the select element which is in light DOM, so the style can never be applied to the element.

To style elements inside a slot of a web component from inside the component, you use the ::slotted() pseudo-element selector inside the component's stylesheet.

For example - the stylesheet for my-dropdown:

:host {
  ::slotted(select) {
    ...
  }
  ...
}

You can also use other selectors inside the ::slotted() function such as ::slotted(.inf__dropdown-select), ::slotted(select.inf__dropdown-select) or ::slotted([slot="filter"]) depending on how specific you need to be according to the design of your component.