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

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

Shadow DOM はスタイルの分離を提供し、グローバルに定義された CSS ルールがシャドウ内の要素に影響を与えるのを防ぎます。木。ただし、これらのシャドウ スコープ スタイルをオーバーライドする必要がある場合があります。特に、ターゲットの要素が直接変更できないサードパーティ ライブラリ内にある場合です。

特定のプロパティのオーバーライド

shadow-root 要素内で定義された特定のプロパティを上書きするには、style 要素を Shadow DOM に直接挿入します。これには以下が含まれます:

1. スタイル要素の作成:

   var style = document.createElement('style');

2. オーバーライド ルールを使用してスタイル要素の innerHTML を設定:

   style.innerHTML = '.the-class-name { property-name: my-value; }';

3. スタイル要素を親要素のshadowRoot:

   host.shadowRoot.appendChild(style);

Chrome 73 および Opera 60 の 2019 アップデート

Chrome 73 および Opera 60 で導入されたより良いアプローチOpera 60 では、CSSStyleSheet オブジェクトを作成し、それを Shadow DOM に関連付けます。ドキュメント:

1. CSSStyleSheet オブジェクトの作成:

   var sheet = new CSSStyleSheet;

2. オーバーライド ルールを使用した CSSStyleSheet オブジェクトの変更:

   sheet.replaceSync('.color { color: pink }');

3. スタイルシートの追加Shadow DOM の AdoptStyleSheets 配列に追加します:

   host.shadowRoot.adoptedStyleSheets.push(sheet);

このメソッドにより、より効率的で動的なスタイルのオーバーライドが可能になります。ただし、予期しない動作を避けるために、同じスタイル シートが複数回追加されないようにすることが重要です。

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