如何覆蓋影子根元素中的樣式？

覆蓋Shadow 根元素中的樣式

Shadow DOM 隔離其範圍內的樣式，這使得使用全域CSS 規則修改它們變得具有挑戰性。要解決此問題，請考慮以下解決方法：

將樣式直接注入到Shadow Root 中：

建立一個新的樣式元素並將其insideHTML 設定為所需的樣式變更：

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

接下來，將樣式元素附加到陰影上root:

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

注意： 不要將相同的樣式表多次加入所採用的StyleSheets 陣列中，尤其是在SPA 頁面重新載入期間。

以上是如何覆蓋影子根元素中的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！