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

重写 Shadow 根元素中的样式

Shadow DOM 的关键特性之一是它的样式隔离。这可以防止外部 CSS 规则影响影子根中的元素，从而确保封装性和模块化。但是，当您需要覆盖影子根中定义的样式时，它也会带来挑战。

问题

根据您的查询，您正在尝试覆盖CSS 属性在影子根元素中定义，特别是在名为 .the-class-name 的类中。然而，如果不直接在开发工具中操作影子根的样式，您就无法实现这一目标。

问题

重写 CSS 规则的传统方法，例如使用全局 CSS 规则或 :host 选择器，由于其隔离而无法使用影子根元素。 Shadow DOM 可防止全局 CSS 规则泄漏到其范围内，并且 :host 选择器仅适用于托管影子根的元素，不适用于影子根内的元素。

解决方案

幸运的是，有一种解决方法可以让您将新样式注入到影子根中直接：

var host = document.querySelector('host-element'); // The element that holds the shadow root
var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild(style);

此代码动态创建一个新的

注意：此解决方法仅在 Shadow DOM 模式设置为“打开”时才有效。

更新（适用于 Chrome 73 和 Opera 60）

使用Chrome 73 和 Opera 60 发布后，一种新技术可用于覆盖影子根中的样式：

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

此方法涉及创建 CSSStyleSheet 对象并将其添加到影子根的采用的StyleSheets 数组中。然后可以使用新的样式表覆盖现有样式。

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