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

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

Shadow DOM はスコープ内でスタイルを分離するため、グローバル CSS ルールを使用してスタイルを変更することが困難になります。これに対処するには、次の回避策を検討してください:

シャドウ ルートにスタイルを直接挿入:

新しいスタイル要素を作成し、その innerHTML に目的のスタイル変更を設定します:

var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';

次に、スタイル要素をシャドウ ルートに追加します。

host.shadowRoot.appendChild(style);

注: この方法では、Shadow DOM が「オープン」モードに設定されている必要があります。 .

Chrome 73 および Opera 60 の機能強化:

これらのブラウザの最近のバージョンでは、CSSStyleSheet オブジェクトをインスタンス化し、Shadow DOM に直接適用できます:

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

注意: 特に SPA ページのリロード中は、同じスタイル シートを AdoptStyleSheets 配列に複数回追加しないでください。

以上がシャドウ ルート要素のスタイルをオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。