javascript - 覆盖影子根元素中的样式

Question

有没有办法改变阴影元素中的样式？具体来说，扩展/覆盖 css class 中的一些属性？我正在使用名为 Beanote 的 chrome 扩展程序自 4 月(2017 年)以来一直没有更新，并且有一个我想修复的讨厌的错误。我发现一行 css 对我来说已经足够了，但是我不知道如何应用它而不进入阴影元素本身并直接在开发工具中编辑这些样式。

我正在为此寻找一种方法:

/*global css rule*/
.the-class-name { property-name: my-value; }

覆盖这个:

/* style tag inside the shadow-root */
.the-class-name { property-name: bad-value; }

我在网上找到的大部分资源都涉及 shadow-root override style 或 edit shadow-root styling 与 :host 有关> 如果它是用于此目的，则不能满足我的需要或已弃用的功能，如 ::shadow。

Answer 1

由于样式隔离是 Shadow DOM 的一个特性，因此您无法定义将在 Shadow DOM 范围内应用的全局 CSS 规则。

使用 CSS 变量是可能的，但它们应该在隐藏组件中显式实现(这不是第 3 方库的情况)。

解决方法是直接在影子 DOM 中注入(inject)样式行。

//host is 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 mode 设置为 'open' 时它才会工作。

---

Chrome 73+ 和 Opera 60+ 的 2019 年更新

现在可以直接实例化 CSSStyleSheet 对象并将其影响到 Shadow DOM 或文档:

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