怎么在Shadow DOM/Web組件中覆蓋CSS

發(fā)布時間：2021-10-26 17:28:11 來源：億速云閱讀：228 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“怎么在Shadow DOM/Web組件中覆蓋CSS”，在日常操作中，相信很多人在怎么在Shadow DOM/Web組件中覆蓋CSS問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么在Shadow DOM/Web組件中覆蓋CSS”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)建一個HTML元素

我們將使用擴(kuò)展基本HTML Element的JavaScript類創(chuàng)建自定義HTML元素。然后，我們將使用要創(chuàng)建的標(biāo)簽名稱和剛剛創(chuàng)建的類調(diào)用 customElements.define()。

class AppCard extends HTMLElement {...} window.customElements.define('app-card', AppCard);

在此示例中，我們將創(chuàng)建此簡單的Material Design卡片，當(dāng)我們在HTML上添加此元素時將顯示該元素：<app-card></ app-card> 。

首先，我們創(chuàng)建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);

現(xiàn)在，我們將使用 app-card 自定義元素，并在Body元素的CSS中創(chuàng)建 card-bg 變量，我們將十六進(jìn)制顏色 #2196F3 分配給變量。

<html>   <head>     <style>       body {         --card-bg: #2196F3;       }     </style>   </head>   <body>     <app-card></app-card>   </body> </html>

到此，關(guān)于“怎么在Shadow DOM/Web組件中覆蓋CSS”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細(xì)節(jié)

怎么在Shadow DOM/Web組件中覆蓋CSS

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽