如何覆盖影子根元素中的样式？

覆盖 Shadow 根元素中的样式

Shadow DOM 隔离其范围内的样式，这使得使用全局 CSS 规则修改它们变得具有挑战性。要解决此问题，请考虑以下解决方法：

将样式直接注入到 Shadow Root 中：

创建一个新的样式元素并将其 insideHTML 设置为所需的样式更改：

var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';

接下来，将样式元素附加到阴影上root:

host.shadowRoot.appendChild(style);

注意：此方法需要将 Shadow DOM 设置为“打开”模式。

Chrome 73 和 Opera 60 增强功能：

在这些浏览器的最新版本中，可以实例化 CSSStyleSheet 对象并直接应用于 Shadow DOM：

var sheet = new CSSStyleSheet;
sheet.replaceSync(`.color { color: pink }`);
host.shadowRoot.adoptedStyleSheets.push(sheet);

注意： 不要将相同的样式表多次添加到采用的StyleSheets 数组中，尤其是在 SPA 页面重新加载期间。

以上是如何覆盖影子根元素中的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！