シャドウ ルート要素のスタイルをオーバーライドするにはどうすればよいですか?

シャドウ ルート要素のスタイルのオーバーライド

Shadow DOM の重要な機能の 1 つは、スタイルの分離です。これにより、外部 CSS ルールがシャドウ ルート内の要素に影響を与えることがなくなり、カプセル化とモジュール性が確保されます。ただし、シャドウ ルート内で定義されたスタイルをオーバーライドする必要がある場合にも課題が生じます。

問題

クエリによると、シャドウ ルート要素内、具体的には .the-class-name という名前のクラス内で定義された CSS プロパティ。ただし、開発ツールでシャドウ ルートのスタイルを直接操作しない限り、これを達成することはできませんでした。

問題

CSS ルールをオーバーライドするための従来の方法 (次のような)グローバル CSS ルールまたは :host セレクターを使用すると、シャドウ ルート要素が分離されているため、シャドウ ルート要素では機能しません。 Shadow DOM は、グローバル CSS ルールがそのスコープに漏れることを防ぎ、:host セレクターはシャドウ ルート内の要素ではなく、シャドウ ルートをホストする要素にのみ適用されます。

解決策

幸いなことに、シャドウ ルートに新しいスタイルを挿入できる回避策があります。直接:

var host = document.querySelector('host-element'); // 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);

このコードは新しい