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

Question

我一直在使用 FAST 工具包 ( https://fast.design ) 创建我自己希望使用的元素。在这段旅程中，我制作了一个工具栏。

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

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

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

引用号:https://github.com/microsoft/fast/issues/3548

Answer 1

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

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

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

请记住，这必须进入工具栏的 css 才能影响插入工具栏插槽中的所有快捷按钮元素。