日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何在Shadow DOM/Web組件中覆蓋CSS

Web組件(Web Components)的主要目的之一是提供封裝——能夠隱藏HTML標(biāo)記結(jié)構(gòu)和CSS樣式，并與頁面上的其他代碼分離，這樣不同的部分就不會沖突，通過這種方式，這樣代碼就可以保持漂亮和干凈。

影子DOM(Shadow DOM)為我們提供了范圍限定的樣式封裝，并提供了一種讓我們隨意選擇進(jìn)入(盡可能少)外界的方法。

但是，如果我想使我的組件可自定義某些樣式屬性，該怎么辦?

本文介紹了使用CSS自定義屬性穿透Shadow DOM并使你的Web組件可自定義的基礎(chǔ)知識。

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

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

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

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

首先，我們創(chuàng)建Shadow DOM root，然后將HTML和CSS字符串分配給Shadow DOM root 的 innerHTML，如下所示。

 
 
 
 
      
  
  
  
  1. class AppCard extends HTMLElement { 
    2.   
  
  
  
  2.   constructor() { 
    3.   
  
  
  
  3.     super(); 
    4.   
  
  
  
  4.     const shadowRoot = this.attachShadow({mode: 'open'}); 
    5.   
  
  
  
  5.         shadowRoot.innerHTML = ` 
    6.   
  
  
  
  6.        
    7.   
  
  
  
  7.        
    8.   
  
  
  
  8.         
    Card title
     
    9.   
  
  
  
  9.       
 
  •     `; 
  •   }}window.customElements.define('app-card', AppCard); 

    • 覆蓋嘗試

    在此示例中，我們要修改卡的背景顏色。如果它是HTML中的簡單 div 元素，則可以覆蓋 card 類或通過CSS選擇器訪問 div 元素。但是，以下嘗試將無效：

     
 
 
 
        
  
  
  
    1. // access the div  
      2.   
  
  
  
    2. app-card > div { 
      3.   
  
  
  
    3.   background-color: #2196F3; 
      4.   
  
  
  
    4. } 
      5.   
  
  
  
    5. // override card class 
      6.   
  
  
  
    6. app-card > .card { 
      7.   
  
  
  
    7.   background-color: #2196F3; 
      8.   
  
  
  
    8. } 
      9.

    使用CSS自定義屬性

    為了解決這個問題，我們可以使用CSS自定義屬性(CSS變量)。可以使用CSS中定義的CSS自定義屬性來更改自定義元素中的某些CSS屬性。

    按照我們的例子，我們將使用屬性 background-color 上的變量 card-bg 來獲取誰在使用自定義元素所定義的顏色。

     
 
 
 
        
  
  
  
    1. class AppCard extends HTMLElement { 
      2.   
  
  
  
    2.   constructor() { 
      3.   
  
  
  
    3.     super(); 
      4.   
  
  
  
    4.     const shadowRoot = this.attachShadow({mode: 'open'}); 
      5.   
  
  
  
    5.         shadowRoot.innerHTML = ` 
      6.   
  
  
  
    6.        
      7.   
  
  
  
    7.        
      8.   
  
  
  
    8.         
      Card title
       
      9.   
  
  
  
    9.       
     
  •     `; 
  •   }}window.customElements.define('app-card', AppCard); 

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

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.    
      3.   
  
  
  
    3.      
      4.   
  
  
  
    4.    
      5.   
  
  
  
    5.    
      6.   
  
  
  
    6.      
      7.   
  
  
  
    7.    
      8.   
  
  
  
    8.  
      9.

    總結(jié)

    使用這種策略，我們可以在你的文檔中擁有一個封裝的CSS元素，同時我們可以允許使用CSS對一些屬性進(jìn)行自定義。你可以在這里訪問一個完整的例子。


    分享標(biāo)題：如何在Shadow DOM/Web組件中覆蓋CSS
    文章分享：http://www.dlmjj.cn/article/djdeedi.html