html5使用web components构建可复用按钮 html5使用自定义元素的实战-html教程-PHP中文网

html5使用web components构建可复用按钮 html5使用自定义元素的实战

絕刀狂花

发布： 2025-10-23 23:54:01

原创

1330人浏览过

通过Web Components可创建不依赖框架的原生可复用按钮组件。利用自定义元素、Shadow DOM和模板技术，实现样式隔离与行为封装，支持主题、状态控制及事件响应，提升前端开发效率与组件复用性。

html5使用web components构建可复用按钮 html5使用自定义元素的实战

在现代前端开发中，可复用、独立封装的 UI 组件是提升开发效率的关键。HTML5 提供了 Web Components 技术，让我们无需依赖框架就能创建自定义、可复用的 HTML 元素。本文通过实战方式，教你如何使用 Web Components 构建一个可复用的按钮组件。

什么是 Web Components？

Web Components 是一套浏览器原生支持的技术，主要包括：

自定义元素（Custom Elements）：定义新的 HTML 标签
影子 DOM（Shadow DOM）：封装样式和结构，避免全局污染
HTML 模板（<template>）：声明可复用的 DOM 结构

这些技术结合使用，可以创建高度封装、样式隔离、行为独立的组件。

创建可复用的自定义按钮

我们来实现一个名为 <my-button> 的按钮组件，支持不同主题（如 primary、danger）、禁用状态，并具备点击反馈。

立即学习“前端免费学习笔记（深入）”；

1. 定义自定义元素类

首先创建一个继承自 HTMLElement 的类，在其中初始化影子 DOM 和内部结构。

class MyButton extends HTMLElement {
  constructor() {
    super();
    // 创建影子根
    this.attachShadow({ mode: 'open' });
  }

  // 组件首次被插入 DOM 时调用
  connectedCallback() {
    const type = this.getAttribute('type') || 'default';
    const disabled = this.hasAttribute('disabled');
    const content = this.textContent || this.getAttribute('text') || '按钮';

    // 渲染按钮结构
    this.shadowRoot.innerHTML = `
      <style>
        .btn {
          padding: 8px 16px;
          border: none;
          border-radius: 4px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s;
        }
        .btn.primary {
          background-color: #007bff;
          color: white;
        }
        .btn.danger {
          background-color: #dc3545;
          color: white;
        }
        .btn.default {
          background-color: #f8f9fa;
          color: #212529;
          border: 1px solid #ced4da;
        }
        .btn:hover:not([disabled]) {
          opacity: 0.8;
        }
        .btn[disabled] {
          opacity: 0.6;
          cursor: not-allowed;
        }
      </style>
      <button class="btn ${type}" ?disabled="${disabled}">
        ${content}
      </button>
    `;

    // 绑定点击事件
    const button = this.shadowRoot.querySelector('button');
    button.addEventListener('click', () => {
      if (!disabled) {
        this.dispatchEvent(new CustomEvent('click', { bubbles: true }));
      }
    });
  }

  // 监听属性变化
  static get observedAttributes() {
    return ['type', 'disabled', 'text'];
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (oldValue !== newValue) {
      this.connectedCallback(); // 重新渲染
    }
  }
}

登录后复制

2. 注册自定义元素

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

使用 customElements.define() 注册新标签：

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

登录后复制

3. 在 HTML 中使用组件

注册完成后，就可以像普通 HTML 元素一样使用它：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>My Button Component</title>
</head>
<body>
  <my-button type="primary" text="提交"></my-button>
  <my-button type="danger">删除</my-button>
  <my-button disabled>不可点击</my-button>

  <script src="my-button.js"></script>
  <script>
    // 监听点击事件
    document.querySelector('my-button').addEventListener('click', () => {
      alert('按钮被点击！');
    });
  </script>
</body>
</html>

登录后复制