web components-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37566921/article/details/131655496

该文章演示了如何使用WebComponent技术创建一个名为MyDialog的自定义对话框元素，结合ShadowDOM和事件监听器实现打开和关闭功能。通过定义CSS样式和HTML结构，以及在构造函数和生命周期方法中进行初始化和清理操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考资料： Web Component - Web API 接口参考 | MDN

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web components</title>
</head>
<body>
  <button class="open">open</button>
  <my-dialog>
      <h1>wo cao nb</h1>
  </my-dialog>
  
  <script>
    class MyDialog extends HTMLElement{
      static componentName = 'my-dialog'; // 静态属性
      #closeButton; // 私有属性

      constructor(){
        super();
        const style = `
          :host(:not([open])) {
              display: none;
          }
          :host {
              position: fixed;
              left: 0; top: 0;
              height: 100%; width: 100%;
              background-color: rgba(25, 28, 34, 0.88);
              z-index: 19;
              display: grid;
              place-items: center;
          }
          dialog {
              position: static;
              display: inherit;
          }
          `

          const html = `
          <style>${style}</style>
          <dialog>
              <!-- slot 插槽 作用与 Vue 的 slot 相同-->
              <slot>暂无提示信息</slot>
              <p>
                  <button name="close">确定</button>
              </p>
          </dialog>
          `;

        // 解析html 字符串 
        const template = document.createRange().createContextualFragment(html)
        const shadowRoot = this.attachShadow({mode: "open"})
        shadowRoot.append(template);
        
        this.#closeButton = this.shadowRoot.querySelector('button[name="close"]')

        this.#closeButton.addEventListener('click', this.hide.bind(this))
      }

      hide() {
        this.toggleAttribute('open', false)
      }

      // 连接到 DOM
      connectedCallback() {
        /**
         * 一种常见错误是将 connectedCallback 用做一次性的初始化事件，
         * 然而实际上你每次将节点连接到 DOM 时都会被调用。
         * 取而代之的，
         * 在 constructor 这个 API 接口调用时做一次性初始化工作会更加合适。
         */
      }

      // 从 DOM 上脱离
      disconnectedCallback() {
        this.#closeButton.removeEventListener('click', this.hide.bind(this))
      }  
    }

    window.customElements.define(MyDialog.componentName, MyDialog)

    const onLoaded = () => {
      const $ = {
          open: document.querySelector('.open'),
          dialog: document.querySelector('my-dialog')
      }

      $.open.addEventListener('click', () => {
          $.dialog.toggleAttribute('open', true)
      })
    }

    window.addEventListener('load', onLoaded);
  </script>  
</body>
</html>