用影子 DOM 来封装样式和结构

Shadow DOM 是一种 Web 技术，可用于将样式和结构封装在一个组件中，而不会影响页面的其余部分。这对于创建可重用组件非常有用，这些组件可以独立于父应用程序的样式表工作。

要使用 Shadow DOM，您需要创建一个 ShadowRoot 对象，该对象表示组件的影子 DOM。然后，您可以将元素添加到影子 DOM，就像您将其添加到常规 DOM 中一样。但是，影子 DOM 中的元素不会影响页面的其余部分，反之亦然。

Shadow DOM 有一些优点，包括：

• 封装： Shadow DOM 中的样式和结构与页面的其余部分隔离。这意味着您可以创建可重用组件，而不用担心它们与其他样式冲突。
• 可重用性： Shadow DOM 组件可以很容易地重复使用。只需将它们添加到您的页面，然后就可以使用了。
• 性能： Shadow DOM 可以提高性能，因为它可以防止样式和结构计算对页面的其余部分产生影响。

在本文中，我们将向您展示如何使用 Shadow DOM 创建一个自定义模态框。

创建自定义模态框

为了创建自定义模态框，我们需要做的第一件事就是创建一个 ShadowRoot 对象。我们可以使用 createShadowRoot() 方法来做到这一点：

const shadowRoot = this.attachShadow({mode: 'open'});

接下来，我们需要将我们的模态框元素添加到影子 DOM。我们可以使用 appendChild() 方法来做到这一点：

shadowRoot.appendChild(this.modal);

现在我们已经将模态框元素添加到影子 DOM，我们就可以开始对其进行样式化了。我们可以使用 style 属性向影子 DOM 添加样式表：

shadowRoot.style.cssText = `
  #modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  #modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
  }
`;

最后，我们需要添加一些脚本以使我们的模态框工作。我们可以使用 addEventListener() 方法来侦听 click 事件，然后使用 toggle() 方法来显示或隐藏模态框：

this.modal.addEventListener('click', () => {
  this.modal.toggle();
});

结论

Shadow DOM 是一个强大的工具，可用于将样式和结构封装在一个组件中。这对于创建可重用组件非常有用，这些组件可以独立于父应用程序的样式表工作。

在本文中，我们向您展示了如何使用 Shadow DOM 创建一个自定义模态框。我们还向您展示了如何使用 createShadowRoot()、appendChild()、style 和 addEventListener() 方法来创建 Shadow DOM 组件。

通过使用 Shadow DOM，您可以创建健壮、可重用且高性能的 Web 组件。