如何使用 Custom Elements 创建一个弹出窗口？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，弹出窗口是一个非常常见的组件。为了实现这个组件，我们通常会使用第三方库或者手写 JavaScript 代码。但是，利用 Web Components 中的 Custom Elements，我们可以很容易地创建一个自定义的弹出窗口组件。

Custom Elements 简介

Custom Elements 是 Web Components 的一部分，它允许我们创建自定义的 HTML 元素并封装它们的功能和样式。通过使用 Custom Elements，我们可以将一个复杂的组件封装成一个独立的自定义元素，然后可以像使用普通的 HTML 元素一样使用它。

创建弹出窗口组件

下面我们来看一下如何使用 Custom Elements 创建一个弹出窗口组件。

1. 定义弹出窗口元素

我们首先需要定义一个弹出窗口元素，可以通过继承 HTMLElement 类来实现：

// javascriptcn.com 代码示例
class PopupWindow extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    // ...
  }

  disconnectedCallback() {
    // ...
  }
}

在构造函数中，我们可以添加一些初始化代码。在 connectedCallback 和 disconnectedCallback 函数中，我们可以添加一些与元素生命周期相关的代码。

2. 添加 Shadow DOM

接下来，我们需要为弹出窗口元素添加 Shadow DOM，这样我们就可以将元素内部的样式和功能与外部隔离开来，避免与全局 CSS 样式或 JavaScript 代码发生冲突：

// javascriptcn.com 代码示例
class PopupWindow extends HTMLElement {
  constructor() {
    super();

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

    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        /* 样式代码 */
      </style>
      <div class="popup-window">
        <!-- 内容代码 -->
      </div>
    `;

    shadow.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {
    // ...
  }

  disconnectedCallback() {
    // ...
  }
}

在构造函数中，我们使用 attachShadow 方法创建 Shadow DOM，并设置 mode 为 'open'，这样我们就可以在外部访问 Shadow DOM 中的内容。然后，我们创建一个 template 元素，将样式和内容放在其中，并将其添加到 Shadow DOM 中。

3. 添加弹出窗口的功能

接下来，我们需要为弹出窗口添加一些功能，例如显示和隐藏、设置标题和内容等。我们可以通过在元素的属性中添加一些自定义属性来实现这些功能：

// javascriptcn.com 代码示例
class PopupWindow extends HTMLElement {
  constructor() {
    super();

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

    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        /* 样式代码 */
      </style>
      <div class="popup-window">
        <header>
          <h2></h2>
          <button class="close-button">×</button>
        </header>
        <div class="content">
          <slot></slot>
        </div>
      </div>
    `;

    shadow.appendChild(template.content.cloneNode(true));

    const closeButton = shadow.querySelector('.close-button');
    closeButton.addEventListener('click', () => this.hide());
  }

  connectedCallback() {
    // ...
  }

  disconnectedCallback() {
    // ...
  }

  static get observedAttributes() {
    return ['title', 'visible'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    switch (name) {
      case 'title':
        this.shadowRoot.querySelector('h2').textContent = newValue;
        break;
      case 'visible':
        if (newValue === 'true') {
          this.show();
        } else {
          this.hide();
        }
        break;
    }
  }

  show() {
    this.style.display = 'block';
  }

  hide() {
    this.style.display = 'none';
  }
}

在上面的代码中，我们添加了一个 header 元素和一个 close-button 元素，用来显示标题和关闭按钮。然后，我们添加了一个 content 元素，用来显示弹出窗口的内容。我们还在 close-button 元素上添加了一个事件监听器，用来监听关闭按钮的点击事件并调用 hide 方法隐藏弹出窗口。

同时，我们还定义了一个 observedAttributes 函数，用来监听元素属性的变化。当 title 属性发生变化时，我们将标题设置为新的值。当 visible 属性发生变化时，我们调用 show 或 hide 方法显示或隐藏弹出窗口。

最后，我们实现了 show 和 hide 方法，用来显示和隐藏弹出窗口。

4. 使用弹出窗口元素

现在我们已经创建了一个自定义的弹出窗口元素，可以在 HTML 中使用它了：

<popup-window title="My Popup Window" visible="true">
  <p>This is the content of my popup window.</p>
</popup-window>

在上面的代码中，我们创建了一个 popup-window 元素，并设置了 title 和 visible 属性。我们还在元素内部添加了一个 p 元素，用来显示弹出窗口的内容。

示例代码

下面是完整的示例代码：

// javascriptcn.com 代码示例
class PopupWindow extends HTMLElement {
  constructor() {
    super();

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

    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        .popup-window {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 400px;
          height: 300px;
          background-color: #fff;
          border: 1px solid #ccc;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          display: none;
        }

        .popup-window header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px;
          background-color: #f0f0f0;
        }

        .popup-window header h2 {
          margin: 0;
        }

        .popup-window header .close-button {
          background-color: transparent;
          border: none;
          font-size: 20px;
          cursor: pointer;
        }

        .popup-window .content {
          padding: 10px;
          height: 100%;
          overflow: auto;
        }
      </style>
      <div class="popup-window">
        <header>
          <h2></h2>
          <button class="close-button">×</button>
        </header>
        <div class="content">
          <slot></slot>
        </div>
      </div>
    `;

    shadow.appendChild(template.content.cloneNode(true));

    const closeButton = shadow.querySelector('.close-button');
    closeButton.addEventListener('click', () => this.hide());
  }

  connectedCallback() {}

  disconnectedCallback() {}

  static get observedAttributes() {
    return ['title', 'visible'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    switch (name) {
      case 'title':
        this.shadowRoot.querySelector('h2').textContent = newValue;
        break;
      case 'visible':
        if (newValue === 'true') {
          this.show();
        } else {
          this.hide();
        }
        break;
    }
  }

  show() {
    this.style.display = 'block';
  }

  hide() {
    this.style.display = 'none';
  }
}

customElements.define('popup-window', PopupWindow);

总结

通过使用 Custom Elements，我们可以很容易地创建一个自定义的弹出窗口组件，并且可以在 HTML 中像使用普通的 HTML 元素一样使用它。Custom Elements 还可以让我们将组件的样式和功能与外部隔离开来，避免与全局 CSS 样式或 JavaScript 代码发生冲突。

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