溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么在Shadow DOM/Web組件中覆蓋CSS”，在日常操作中，相信很多人在怎么在Shadow DOM/Web組件中覆蓋CSS問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在Shadow DOM/Web組件中覆蓋CSS”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
創建一個HTML元素
我們將使用擴展基本HTML Element的JavaScript類創建自定義HTML元素。然后，我們將使用要創建的標簽名稱和剛剛創建的類調用 customElements.define()。
class AppCard extends HTMLElement {...} window.customElements.define('app-card', AppCard);在此示例中，我們將創建此簡單的Material Design卡片，當我們在HTML上添加此元素時將顯示該元素：<app-card></ app-card> 。
首先，我們創建Shadow DOM root，然后將HTML和CSS字符串分配給Shadow DOM root 的 innerHTML，如下所示。
class AppCard extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .card { background-color: #fff; ... } </style> <div class="card"> <div>Card title</div> </div> `; }}window.customElements.define('app-card', AppCard);覆蓋嘗試
在此示例中，我們要修改卡的背景顏色。如果它是HTML中的簡單 div 元素，則可以覆蓋 card 類或通過CSS選擇器訪問 div 元素。但是，以下嘗試將無效：
// access the div app-card > div { background-color: #2196F3; } // override card class app-card > .card { background-color: #2196F3; }使用CSS自定義屬性
為了解決這個問題，我們可以使用CSS自定義屬性(CSS變量)。可以使用CSS中定義的CSS自定義屬性來更改自定義元素中的某些CSS屬性。
按照我們的例子，我們將使用屬性 background-color 上的變量 card-bg 來獲取誰在使用自定義元素所定義的顏色。
class AppCard extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .card { background-color: var(--card-bg, #fff); ... } </style> <div class="card"> <div>Card title</div> </div> `; }}window.customElements.define('app-card', AppCard);現在，我們將使用 app-card 自定義元素，并在Body元素的CSS中創建 card-bg 變量，我們將十六進制顏色 #2196F3 分配給變量。
<html> <head> <style> body { --card-bg: #2196F3; } </style> </head> <body> <app-card></app-card> </body> </html>
到此，關于“怎么在Shadow DOM/Web組件中覆蓋CSS”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
