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

重寫 Shadow 根元素中的樣式

Shadow DOM 的關鍵特性之一是它的樣式隔離。這可以防止外部 CSS 規則影響影子根中的元素，從而確保封裝性和模組化。然而，當您需要覆蓋影子根中定義的樣式時，它也會帶來挑戰。

問題

根據您的查詢，您正在嘗試覆蓋CSS 屬性在影子根元素中定義，特別是在名為.the-class-name 的類中。然而，如果不直接在開發工具中操作影子根的樣式，您就無法實現這一目標。

問題

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

此程式碼動態建立一個新的

注意：此解決方法僅在 Shadow DOM 模式設定為「開啟」時才有效。

更新（適用於Chrome 73 和Opera 60）

使用Chrome 73 和Opera 60 發布後，一種新技術可用於覆蓋影子根中的樣式：

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

此方法涉及建立CSSStyleSheet 物件並將其新增至影子根的採用的StyleSheets 陣列中。然後可以使用新的樣式表覆蓋現有樣式。

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