原生 web 组件 - 样式化阴影 dom

Question

我有一个包含 css 类的 index.html 文件。我希望这些类或至少其中一些在我的组件的影子 dom 中工作。

我找到了一种让 chrome 使用 ::part() 的方法。有了这个，我可以为我的组件“share-button”提供样式 - share-button::part(button) {}

嗯。在 chrome 和 opera 中效果很好，但在 Firefox 中却不行（是的，最新版本）。

有没有办法为不支持 ::part() 的浏览器提供方法？

谢谢

Answer 1

一种方法是将 shadowDOM 和常规 DOM 所需的 CSS 保存在单独的 CSS 文件中，然后使用 <link> 标记将其加载到页面和 shadowDOM 中。

另一种方法是使用打包应用程序将外部 CSS 绑定到组件中，使其完全独立。然后使用<link>进入主页面。