Shadow DOM 不继承 HTML 的样式|极客教程

Shadow DOM 不继承 HTML 的样式

1. 引言

随着 Web 技术的不断发展，CSS 的样式处理在前端开发中起着重要的作用。然而，当我们在开发复杂的网页或应用程序时，可能会遇到样式冲突和命名空间的问题。为了解决这些问题，Shadow DOM 技术被引入并逐渐得到广泛应用。Shadow DOM 允许开发者将元素的样式和行为封装在其自己的作用域中，以避免与其他元素的样式冲突。但是，Shadow DOM 不继承 HTML 的样式，本文将详解这个问题。

2. Shadow DOM 简介

Shadow DOM 是一种 Web 标准，用于将元素的样式、结构和行为封装在其自己的作用域中。通过使用 Shadow DOM，我们可以创建独立的组件，使其具有隔离的样式和行为，从而避免全局样式和脚本的冲突。

Shadow DOM 由三个关键组成部分构成：

2.1 Shadow Host（影子宿主）

Shadow Host 是一个普通的 HTML 元素，它充当 Shadow DOM 的主体。其他元素或组件可以将 Shadow DOM 附加到 Shadow Host 上。

<div id="shadow-host"></div>

2.2 Shadow Root（影子根）

Shadow Root 是 Shadow DOM 的根节点，它包含了 Shadow DOM 的所有子节点。Shadow Root 内部的元素和样式将被封装在 Shadow DOM 的作用域中。

我们可以使用 attachShadow 方法创建 Shadow DOM，并将其附加到 Shadow Host 上：

const shadowHost = document.getElementById('shadow-host');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

2.3 Shadow Tree（影子树）

Shadow Tree 是 Shadow Root 的子树结构，它由 Shadow Root 中的元素组成，并封装了 Shadow DOM 的样式和行为。

3. Shadow DOM 不继承 HTML 的样式

Shadow DOM 的一个重要特性是不继承外部 HTML 的样式。这意味着在 Shadow DOM 中，外部样式表或内联样式不会影响到 Shadow DOM 内部的元素。

考虑以下示例代码：

<style>
  h1 {
    color: red;
  }
</style>

<div id="shadow-host">
  <h1>Hello, Shadow DOM!</h1>
</div>

<script>
  const shadowHost = document.getElementById('shadow-host');
  const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
  const h1 = document.createElement('h1');
  h1.textContent = 'Hello, Shadow DOM!';
  shadowRoot.appendChild(h1);
</script>

在上述代码中，我们在外部的 <style> 元素中设置了 h1 元素的颜色为红色。然而，在 Shadow DOM 内部创建的 h1 元素不会继承外部样式，因此它的颜色不会变为红色。

虽然 Shadow DOM 不继承外部样式，但它可以自定义内部的样式。我们可以在 Shadow Root 中的 <style> 元素中定义样式，它将应用于 Shadow Tree 内的所有元素。

<div id="shadow-host">
  <style>
    h1 {
      color: blue;
    }
  </style>
  <h1>Hello, Shadow DOM!</h1>
</div>

在上述代码中，我们在 Shadow DOM 内部的 <style> 元素中设置了 h1 元素的颜色为蓝色。结果是在 Shadow Tree 内的 h1 元素将显示为蓝色。

4. 重新启用样式继承

尽管 Shadow DOM 不继承外部样式，但我们可以通过使用 CSS 的 ::slotted 选择器来实现样式的重新启用继承。

在 Shadow DOM 内，我们可以通过 <slot> 元素将内容插入到 Shadow Tree 中。而 ::slotted 选择器允许我们选择被 <slot> 插入的内容，并在 Shadow DOM 内部修改它们的样式。

考虑以下示例代码：

<style>
  h1::slotted(span) {
    color: red;
  }
</style>

<div id="shadow-host">
  <h1><span>Hello, Shadow DOM!</span></h1>
</div>

<script>
  const shadowHost = document.getElementById('shadow-host');
  const shadowRoot = shadowHost.attachShadow({ mode: 'open' });

  const h1 = document.createElement('h1');
  const span = document.createElement('span');
  span.textContent = 'Hello, Shadow DOM!';
  h1.appendChild(span);
  shadowRoot.appendChild(h1);
</script>

在上述代码中，我们在外部的 <style> 元素中使用 h1::slotted(span) 选择器来选择被 <slot> 插入的 span 元素，并将其颜色设置为红色。