时间戳

首页 > 解决方案 > 使用 FAST 有没有办法将样式应用于子 ShadowDOM 元素？

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

问题描述

我一直在使用 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

标签： performanceshadow-domfast-ui

解决方案

这是一个很好的问题。幸运的是，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插入工具栏插槽的元素。

推荐阅读