Custom Elements 中如何实现常见的 UI 组件-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，常见的 UI 组件比如按钮、弹窗、菜单等等，在传统的 HTML、CSS、JavaScript 开发过程中，通常是通过手动实现所需的结构和样式来创建的。然而，随着 Web Components 技术的发展，我们可以更加轻松地实现自定义的 UI 组件。其中，Custom Elements 是 Web Components 的核心技术之一，本文将介绍如何使用 Custom Elements 实现常见的 UI 组件。

回顾 Custom Elements

Custom Elements 可以让我们创建自定义的 HTML 元素。这些元素可以具有自己的属性、方法和事件，就像浏览器原生的 HTML 元素一样。在任何一个 Web Component 中，Custom Elements 都是至关重要的，因为它们为组件提供了最基本、最核心的元素。

实现一个 Custom Element 需要进行以下步骤：

继承 HTMLElement 类，创建一个新的 JavaScript 类。
在这个类中定义所需的功能和属性，例如:

// javascriptcn.com 代码示例
class MyButton extends HTMLElement {
    constructor() {
        super();
        this.addEventListener('click', this.onClick.bind(this));
    }
  
    onClick() {
        alert('clicked!');
    }
}

使用 customElements.define() 方法将新类与所需的标签名称绑定起来，例如：

customElements.define('my-button', MyButton);

这样，我们就可以在 HTML 中使用新的自定义元素了：

<my-button>Click me!</my-button>

实现常见的 UI 组件

按钮

按钮是 Web 应用程序中最常用的 UI 元素之一。通过 Custom Elements，我们可以实现一个 my-button 元素，并为其添加一些自定义属性和样式：

// javascriptcn.com 代码示例
class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
          background-color: blue;
          color: white;
          border: none;
          padding: 10px;
          font-size: 16px;
          cursor: pointer;
        }
        
        :host(:hover) {
          background-color: darkblue;
        }
      </style>
      
      <slot></slot>
    `;
  }
}

customElements.define('my-button', MyButton);

在上面的示例中，我们为 my-button 元素添加了一个 Shadow DOM，并在其中定义了样式和内容。用户可以通过 <my-button> 标签使用该组件，并可以在标签中添加任意内容，例如：

<my-button>Click me!</my-button>

弹窗

弹窗通常用于向用户显示额外的信息或获得用户的输入。我们可以使用 Custom Elements 实现一个简单的弹窗组件 my-modal：

// javascriptcn.com 代码示例
class MyModal extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.isOpen = false;
  
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
        }
      
        :host([open]) {
          display: flex;
        }
        
        .modal {
          width: 500px;
          height: 300px;
          background-color: white;
          margin: auto;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        
        .close {
          position: absolute;
          top: 10px;
          right: 10px;
          cursor: pointer;
        }
      </style>
      
      <div class="modal">
        <h2><slot name="title"></slot></h2>
        <slot></slot>
        <span class="close" title="close">×</span>
      </div>
    `;
  
    const closeButton = this.shadowRoot.querySelector('.close');
    closeButton.addEventListener('click', this.close.bind(this));
  }
  
  open() {
    this.isOpen = true;
    this.setAttribute('open', '');
  }
  
  close() {
    this.isOpen = false;
    this.removeAttribute('open');
  }
}

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

在上面的示例中，我们为 my-modal 元素添加了一个 Shadow DOM 和一些样式，以及开关弹窗的 open()、close() 方法。用户可以通过 <my-modal> 标签使用该组件，并可以在标签中添加任意内容和标题，例如：

<my-modal>
  <h3 slot="title">Modal Title</h3>
  <p>Modal content goes here.</p>
</my-modal>

菜单

菜单是应用程序中经常用到的 UI 组件之一。我们可以使用 Custom Elements 实现一个简单的菜单组件 my-menu：

// javascriptcn.com 代码示例
class MyMenu extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.isOpen = false;
  
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
          position: relative;
        }
      
        button {
          background-color: white;
          border: 1px solid gray;
          padding: 10px;
          cursor: pointer;
        }
        
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          position: absolute;
          top: 100%;
          left: 0;
          background-color: white;
          border: 1px solid gray;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
          z-index: 1;
          transition: opacity 0.3s ease-in-out;
          opacity: 0;
          pointer-events: none;
        }
        
        :host([open]) ul {
          opacity: 1;
          pointer-events: auto;
        }
        
        li {
          margin: 0;
          padding: 10px;
          border-bottom: 1px solid gray;
        }
        
        li:hover {
          background-color: gray;
          color: white;
        }
      </style>
      
      <button>Menu</button>
      
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    `;
  
    const button = this.shadowRoot.querySelector('button');
    const menu = this.shadowRoot.querySelector('ul');
  
    button.addEventListener('click', () => {
      this.isOpen = !this.isOpen;
      if (this.isOpen) {
        this.setAttribute('open', '');
      } else {
        this.removeAttribute('open');
      }
    });
  
    menu.addEventListener('click', () => {
      this.isOpen = !this.isOpen;
      this.removeAttribute('open');
    });
  }
}

customElements.define('my-menu', MyMenu);

在上面的示例中，我们为 my-menu 元素添加了一个 Shadow DOM 和一些样式，以及开关菜单的 open()、close() 方法。用户可以通过 <my-menu> 标签使用该组件，例如：

<my-menu>
</my-menu>

总结

通过 Custom Elements，我们可以更加轻松地实现自定义的 UI 组件。在本文中，我们介绍了如何使用 Custom Elements 实现常见的 UI 组件，如按钮、弹窗和菜单，并提供了示例代码。希望本文能够对您的 Web Components 开发有所帮助。

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