利用 Custom Elements 和 Shadow DOM 创建 Modal 组件的正确姿势

前言

随着 Web 应用的发展，我们经常会使用到一些弹窗组件来增加用户交互体验。目前市面上有很多成熟的弹窗组件库，例如 bootstrap、element-ui 等，它们都提供了相应的弹窗组件。但是，当我们需要自定义一些特定样式或功能的弹窗组件时，我们可以使用 Custom Elements 和 Shadow DOM 技术创建自己的弹窗组件，这样可以更加方便地满足自己的需求。

Custom Elements 和 Shadow DOM 简介

Custom Elements 是 Web Components 标准的一部分，它允许我们创建自定义的 HTML 元素，这些元素可以与原生的 HTML 元素一样使用，我们可以添加自定义的特性和方法等。

Shadow DOM 也是 Web Components 标准的一部分，它可以使我们创建一个封装良好的 DOM 树状结构。这个 DOM 树状结构不会与页面的其他元素发生冲突，可以减少因 CSS 样式冲突带来的烦恼。

Modal 组件

在实际应用中，Modal 组件是比较常用的一种弹窗组件。Modal 组件一般由一个遮罩层和一个弹窗组成，弹窗的内容可以是文字、图片、表单等。

下面我们来使用 Custom Elements 和 Shadow DOM 技术创建一个简单的 Modal 组件。

HTML 代码

<template id="tpl">
  <style>
    #modal {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
      width: 500px;
      height: 300px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      display: none;
    }

    #modal.show {
      display: block;
    }

    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9998;
      display: none;
    }

    #overlay.show {
      display: block;
    }

    #header {
      padding: 10px;
      background-color: #f1f1f1;
      border-bottom: 1px solid #ccc;
      font-size: 16px;
    }

    #content {
      padding: 10px;
    }

    #footer {
      padding: 10px;
      text-align: center;
      background-color: #f1f1f1;
      border-top: 1px solid #ccc;
    }

    #close {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 18px;
      cursor: pointer;
    }
  </style>
  <div id="overlay">
    <div id="modal">
      <div id="close">×</div>
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>
    </div>
  </div>
</template>

上面的代码中，我们先准备了一个模板，其中包括一个样式标签和 Modal 的 HTML 代码。这里的样式采用的是简单的 CSS 样式，可以根据自己的需求进行修改。

JavaScript 代码

class MyModal extends HTMLElement {
  constructor() {
    super();

    const tpl = document.querySelector('#tpl');
    const tplContent = tpl.content.cloneNode(true);

    this.attachShadow({mode: 'open'}).appendChild(tplContent);

    this.modal = this.shadowRoot.querySelector('#modal');
    this.overlay = this.shadowRoot.querySelector('#overlay');
    this.header = this.shadowRoot.querySelector('#header');
    this.content = this.shadowRoot.querySelector('#content');
    this.footer = this.shadowRoot.querySelector('#footer');
    this.close = this.shadowRoot.querySelector('#close');

    this.close.addEventListener('click', () => {
      this.hide();
    });
  }

  connectedCallback() {
    this.header.textContent = this.getAttribute('header');
    this.content.innerHTML = this.innerHTML;
    this.footer.innerHTML = '<button>确定</button>';

    const show = this.getAttribute('show');
    if (show === 'true') {
      this.show();
    }
  }

  show() {
    this.modal.classList.add('show');
    this.overlay.classList.add('show');
  }

  hide() {
    this.modal.classList.remove('show');
    this.overlay.classList.remove('show');
  }
}

customElements.define('my-modal', MyModal);

上面的代码中，我们定义了一个 MyModal 类，它继承自 HTMLElement，重写了构造函数和 connectedCallback 方法。在构造函数中，我们先获取 Modal 的 HTML 模板，并将其添加到 Shadow DOM 中。然后获取 Modal 中的各个元素，并绑定了关闭按钮的点击事件。

在 connectedCallback 方法中，我们根据在 HTML 中传递的属性值，设置 Modal 的头部、内容、底部等元素。如果在 HTML 中传递了 show 属性为 true，则直接显示 Modal。

最后，我们通过 customElements.define 方法将 MyModal 组件注册成一个 Custom Elements。

使用 MyModal

使用 MyModal 组件非常简单，只需要在 HTML 中添加以下代码即可：

<my-modal header="提示" show="true">
  你好，这是一个弹窗！
</my-modal>

总结

通过本文的讲解，我们已经了解了如何使用 Custom Elements 和 Shadow DOM 技术创建一个简单的 Modal 组件。这种方法不仅可以满足我们自定义弹窗的需求，而且还可以加深我们对 Custom Elements 和 Shadow DOM 技术的理解。当然，我们也可以在此基础上根据自己的需求对 Modal 组件进行更加复杂的定制。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a21b35add4f0e0ffa2b116