阴影根元素中的样式替代 [英] Override styles in a shadow-root element

问题描述

有没有办法改变阴影元素中的样式?具体来说，是否扩展/覆盖在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.

解决方案

由于阴影DOM的功能是样式隔离，因此无法定义将在阴影DOM范围中应用的全局CSS规则./p>

使用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 ] 

Is there a way to change styles found in a shadow element? Specifically, extend/overwrite some properties found in a css class? I am using a chrome-extension called Beanote which hasn't been updated since April(2017) and there's a pesky bug I'd like to fix. I found that one line of css patches it up enough for me, but I am at a loss at applying it without going inside of the shadow element itself and directly editing those styles in the dev tools.

I'm looking for a way for this:

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

to overwrite this:

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

Most of the resources I've found online with queries involving shadow-root override style or edit shadow-root styling had something to do with :host which, if its meant for this, doesn't work for my needs or deprecated functionality like ::shadow.

解决方案

Because of the isolation of styles, which is a feature of Shadow DOM, you cannot define a global CSS rule that will be applied in the Shadow DOM scope.

It could be possible with CSS variables but they should be implemented explicitly in the shadowed component (which is not the case with this 3rd party library).

A workaround is to inject the line of style in the shadow DOM directly.

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

NB: it will work only if the Shadow DOM mode is set to 'open'.

---

2019 update for Chrome 73+ and Opera 60+

Now it is possible to instantiate a CSSStyleSheet object directly and to affect it to a Shadow DOM or a document:

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

这篇关于阴影根元素中的样式替代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！