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

前端

技术

发布日期: 2021-02-01

更新日期: 2021-02-02

文章字数: 723

阅读时长: 3 分

阅读次数:

本文翻译自levelup.gitconnected.com，作者：Cesar William Alvarenga

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 上添加此元素时将显示该元素：<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>