时间戳

首页 > 解决方案 > 原生 web 组件 - 样式化阴影 dom

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

问题描述

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

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

出色地。在 chrome 和 opera 中它工作得很好，但在 Firefox 中却不行（是的，最新版本）。

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

谢谢

标签： javascriptstylesshadow-dom

解决方案

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

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

推荐阅读