使用 CSS Exportparts 导出多个部件

Question

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

结构如下：

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

然后在我的 CSS 中：

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

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

Answer 1

这方面的文档严重缺乏。

你们非常接近。不应使用空格来分隔不同部分，而exportparts应使用逗号,。

您的新代码将是：

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

现在您可以设计theme-btn和theme-dropdown零件的样式。