覆蓋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中文網其他相關文章！
