为什么::part()不能用于开槽模板元素?

Question

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

在my-dropdown组件中，我有一个槽:

<slot name="filter" />

css样式表位于组件内部，我在其中定义了:

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

样式不适用于组件!为什么?我做得不对吗?

Answer 1

简单的回答:因为它不是用来处理有槽元素的.

CSS parts::part()伪元素选择器用于对使用part属性的shadow DOM中的元素应用样式。

在您的示例中，您已将part属性添加到元素<select slot="filter" part="myselect">中，该元素在浅色DOM中而不是阴影DOM中。

注意，有槽的元素实际上并没有被移动到影子DOM;它们在DOM中的位置不受插槽机制的影响，因此它们像任何其他元素一样存在于常规轻量级DOM中。它们只是在父web组件的阴影DOM结构中呈现，其中包含该slot的组件阴影DOM样式(::slotted())和任何常规DOM样式(例如全局样式表)。

为了使my-dropdown::part(myselect)选择器工作，具有part="myselect"属性的元素必须位于my-dropdown组件的阴影内-例如:

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