如何在Shadow DOM/Web组件中覆盖CSS

Web组件(Web Components)的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。

影子DOM(Shadow DOM)为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入(尽可能少)外界的方法。

但是，如果我想使我的组件可自定义某些样式属性，该怎么办?

本文介绍了使用CSS自定义属性穿透Shadow DOM并使你的Web组件可自定义的基础知识。

创建一个HTML元素

我们将使用扩展基本HTML Element的JavaScript类创建自定义HTML元素。然后，我们将使用要创建的标签名称和刚刚创建的类调用 customElements.define()。

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

在此示例中，我们将创建此简单的Material Design卡片，当我们在HTML上添加此元素时将显示该元素： 。

首先，我们创建Shadow DOM root，然后将HTML和CSS字符串分配给Shadow DOM root 的 innerHTML，如下所示。

 
 
 
 
  
  
  
  
class AppCard extends HTMLElement { 
  
  
  
  
  constructor() { 
  
  
  
  
    super(); 
  
  
  
  
    const shadowRoot = this.attachShadow({mode: 'open'}); 
  
  
  
  
        shadowRoot.innerHTML = ` 
  
  
  
  
       
  
  
  
  
       
  
  
  
  
        
Card title