使用 FAST 有没有办法将样式应用于子 ShadowDOM 元素？

Question

我一直在使用 FAST 工具包 ( https://fast.design ) 创建我想要使用的自己的元素。那段旅程的一部分使我制作了一个Toolbar.

曾经Toolbar，我想将按钮的背景更改为透明（看起来像：https : //fluentsite.z22.web.core.windows.net/components/toolbar/definition。现在我可以创建另一个元素, 即ToolbarButton扩展Button（以及需要删除背景的任何其他控件）并且它会为我的目的工作。不过，感觉就像我应该能够做的事情，因为它是Toolbar.

我不确定这是否可能，但我无法通过 GitHub 上的文档和源代码来弄清楚。

任何意见，将不胜感激。

参考：https : //github.com/microsoft/fast/issues/3548

Answer 1

这是一个很好的问题。幸运的是，shadow dom 本身支持这种情况下的 CSS 特性。您可以使用::slotted工具栏的 CSS 选择器来选择插入工具栏插槽中的特定元素，并将自定义样式应用于它们。因此，您可以将一个插入工具栏中的按钮作为目标，并使用它来设置按钮的 css 属性，或者直接将样式应用到它或其 CSS 部分。这是 MDN 文档的链接：https : //developer.mozilla.org/en-US/docs/Web/CSS/ :: slotted

这是一些基于您的场景的示例 css。

::slotted(fast-button) {
  --accent-fill-rest: transparent;
}

请记住，这必须进入工具栏的 css 以影响所有fast-button插入工具栏插槽的元素。