javascript - 阴影根元素中的样式

有没有办法改变阴影元素中的样式？具体来说，扩展/覆盖css 类中找到的某些属性？我使用的是chromet扩展名Beanote，自2017年4月以来未进行过更新，我想修复一个讨厌的错误。我发现一行css对我来说足以对其进行修补，但是我在不使用shadow元素本身并直接在dev工具中编辑这些样式的情况下应用它感到无所适从。

我正在寻找一种方法:

/*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不能满足我的需求或像ojit_code这样已弃用的功能。

最佳答案

由于样式的隔离是Shadow DOM的功能，因此无法定义将在Shadow DOM范围中应用的全局CSS规则。

CSS变量可能是可行的，但应在阴影组件中显式实现(这不是第3方库的情况)。

一种解决方法是直接在阴影DOM中插入样式线。

//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 ]

关于javascript - 阴影根元素中的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47625017/