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

Question

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

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

我不确定这是否可行，但我无法通过查看 GitHub 上的文档和源代码来弄明白。

如有任何建议，我们将不胜感激。

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

Answer 1

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

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

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

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

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

Using FAST Is there a way to apply styles to child ShadowDOM elements?

performance

shadow-dom

fast-ui