シャドウルート要素のスタイルを上書きする

Question

シャドウ要素にあるスタイルを変更する方法はありますか？具体的には、CSS クラスにあるいくつかのプロパティを拡張/上書きしますか？私はBeanoteと呼ばれるクロムエクステンションを使用していますが、これは4月（2017年）以来更新されておらず、修正したい厄介なバグがあります。私はcssの1行で十分にそれをパッチしていることがわかりましたが、シャドウ要素自体の内部に入り、devツールでこれらのスタイルを直接編集しなくても、それを適用することはできませんでした。

私はこのために方法を探しています：クエリとオンライン

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

私が見つけたリソースのほとんどが関与：

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

がこれを上書きしますshadow-root override styleまたはedit shadow-root stylingは、:hostと何か関係がありました。このためには、私のニーズに対応したり、機能が廃止されました（::shadowなど）。

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

NB：それはシャドウDOM modeが'open'に設定されている場合にのみ動作します。