阴影根元素中的样式

小编典典

阴影根元素中的样式

css

有没有办法改变阴影元素中的样式？具体来说，扩展/覆盖CSS 类中的
某些属性？我正在使用一个名为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。

阅读 402

2020-05-16

共1个答案

小编典典

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

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

一种解决方法是直接在阴影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 ]

2020-05-16