怎样使用Web Components构建可复用的自定义HTML元素？-js教程-PHP中文网

怎样使用Web Components构建可复用的自定义HTML元素？

狼影

发布： 2025-10-08 17:34:01

原创

698人浏览过

使用Web Components可创建独立可复用的自定义元素，1. 通过继承HTMLElement并用customElements.define()注册组件；2. 利用影子DOM实现样式和结构隔离；3. 结合template标签提升代码组织性与性能；4. 使用slot插入外部内容以增强灵活性；5. 通过observedAttributes和attributeChangedCallback响应属性变化。该技术不依赖框架，适合构建跨项目UI库，需注意浏览器兼容性。

怎样使用web components构建可复用的自定义html元素？

使用 Web Components 构建可复用的自定义 HTML 元素，核心在于利用浏览器原生支持的几项技术：自定义元素（Custom Elements）、影子 DOM（Shadow DOM）和 HTML 模板（template）。通过它们可以封装样式、结构和行为，实现真正独立、可复用的组件。

定义自定义元素

要创建一个可复用的自定义元素，首先需要继承 HTMLElement 并通过 customElements.define() 注册。元素名称必须包含连字符（-），以避免与原生 HTML 标签冲突。

例如：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.textContent = this.getAttribute('label') || '点击我';
    this.style.padding = '10px 20px';
    this.style.backgroundColor = '#007bff';
    this.style.color = 'white';
    this.style.borderRadius = '4px';
    this.style.display = 'inline-block';
    this.style.cursor = 'pointer';
  }

  connectedCallback() {
    this.addEventListener('click', () => {
      alert('按钮被点击！');
    });
  }
}

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

登录后复制

之后就可以在 HTML 中使用：
<my-button label="提交"></my-button>

使用影子 DOM 封装样式和结构

为了让组件样式不被外部影响，也防止组件内部样式泄漏到全局，应使用影子 DOM。在构造函数中调用 this.attachShadow({ mode: 'open' }) 创建影子根。

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

改进后的例子：

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const wrapper = document.createElement('div');
    const title = document.createElement('h3');
    const content = document.createElement('p');

    title.textContent = this.getAttribute('title') || '默认标题';
    content.textContent = this.getAttribute('content') || '这是内容';

    const style = document.createElement('style');
    style.textContent = `
      div {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 16px;
        background: #f9f9f9;
        font-family: sans-serif;
      }
      h3 { color: #333; margin-top: 0; }
      p { color: #555; }
    `;

    wrapper.appendChild(title);
    wrapper.appendChild(content);
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

customElements.define('my-card', MyCard);

登录后复制

现在这个卡片组件的样式完全隔离，不会受页面其他 CSS 影响。

AppMall应用商店

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

查看详情

结合 template 提高可维护性

对于结构较复杂的组件，推荐使用 <template> 标签预定义 DOM 结构，提升代码组织性和性能。

HTML 中定义模板：

<template id="my-modal-template">
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      align-items: center;
      justify-content: center;
    }
    .modal.active {
      display: flex;
    }
    .modal-content {
      background: white;
      padding: 20px;
      border-radius: 8px;
      max-width: 500px;
    }
  </style>
  <div class="modal">
    <div class="modal-content">
      <slot></slot>
    </div>
  </div>
</template>

登录后复制

JS 中使用模板：

class MyModal extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('my-modal-template');
    const content = template.content.cloneNode(true);
    this.shadowRoot = this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(content);

    this.modal = this.shadowRoot.querySelector('.modal');
  }

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

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

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

登录后复制

通过 slot 可以让使用者传入自定义内容，增强灵活性。

监听属性变化响应更新

如果希望组件对属性变化做出反应，可以使用 static get observedAttributes() 定义需监听的属性，并实现 attributeChangedCallback 方法。

示例：

class MyInput extends HTMLElement {
  static get observedAttributes() {
    return ['value', 'disabled'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'value') {
      this.input.value = newValue;
    }
    if (name === 'disabled') {
      this.input.disabled = newValue !== null;
    }
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.input = document.createElement('input');
    this.shadowRoot.appendChild(this.input);
  }
}

customElements.define('my-input', MyInput);

登录后复制

这样当设置 <my-input value="测试" disabled></my-input> 时，组件会自动更新状态。

基本上就这些。Web Components 不依赖任何框架，适合构建跨项目、跨团队使用的 UI 组件库。虽然功能强大，但要注意浏览器兼容性，必要时引入 polyfill。关键是合理封装、暴露清晰 API，才能真正实现“一次编写，到处复用”。

以上就是怎样使用Web Components构建可复用的自定义HTML元素？的详细内容，更多请关注php中文网其它相关文章！