使用 CSS exportparts 导出多个零件

Question

我有一个嵌套在其他 Web 组件中的 Web 组件，我正在为我的组件开发 theming 解决方案。我需要一种导出多个部件的方法，但我尝试做的事情不起作用，并且在我尝试导出多个部件时未应用样式。

结构如下：

<my-component>
  <other-component exportparts="theme-btn theme-dropdown"/>
</my-component>

然后在我的 CSS:

my-component::part(theme-btn) {
  background-color: tomato;
}

未应用任何样式。但是，当我只导出这样的一部分时：other-component 中的 exportparts="theme-btn" 它可以工作并应用样式。我哪里错了？

Answer 1

这方面documentation严重欠缺

你非常接近。不要使用 space 来分隔 exportparts 中的不同部分，而应使用逗号 ,.

您的新代码将是：

<my-component>
  <other-component exportparts="theme-btn, theme-dropdown"/>
</my-component>

现在您可以为 theme-btn 和 theme-dropdown 部分设置样式。

Exporting multiple parts with CSS exportparts