如何将类添加到开槽元素？

In my my-dropdown模板中的组件，我有这个：

<slot name="filter"  />

在我的 HTML 中，我有这样的内容：

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

班上inf__dropdown-select是在组件的样式表中定义的，它曾经应用于selectcomponent.tsx 中的元素，但由于我现在需要将其插入槽，所以我替换了select具有单个元素<slot name="filter" />槽，但现在我不知道如何申请该课程？如果我将课程添加到slot在组件内部，它不是 应用。我认为将其添加到您要插入的元素中会起作用，但事实并非如此。如何确保该类应用于槽位select元素？

您已经实施了inf__dropdown-selectShadow DOM 中的样式类（样式my-dropdown），但该类正在设置select元素位于 light DOM 中，因此样式永远不能应用于该元素。

要从组件内部设置 Web 组件槽内的元素样式，可以使用::slotted()组件样式表内的伪元素选择器。

例如 - 样式表my-dropdown:

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

您还可以在内部使用其他选择器::slotted()函数如::slotted(.inf__dropdown-select), ::slotted(select.inf__dropdown-select) or ::slotted([slot="filter"])取决于您根据组件的设计需要的具体程度。