JavaScript组件化_WebComponents标准实践-js教程-PHP中文网

JavaScript组件化_WebComponents标准实践

狼影

发布： 2025-11-23 21:20:02

原创

192人浏览过

WebComponents通过Custom Elements、Shadow DOM和HTML Templates实现原生组件化。Custom Elements允许创建带行为的自定义标签，需继承HTMLElement并用customElements.define注册，标签名必须含短横线。Shadow DOM通过attachShadow提供隔离的DOM和样式，mode为'open'可访问shadowRoot，'closed'则不可，内部使用<slot>分发内容。HTML Templates定义不渲染的模板结构，可在JS中克隆插入。实际应用中需注意浏览器兼容性（IE不支持）、框架集成差异（React支持弱）、状态管理及构建优化，推荐使用Lit等工具提升开发效率。该技术适合跨框架复用和设计系统建设。

javascript组件化_webcomponents标准实践

JavaScript组件化是现代前端开发的重要方向，而WebComponents作为浏览器原生支持的组件化标准，提供了一种不依赖框架、跨平台复用UI组件的方式。它由三项核心技术组成：Custom Elements、Shadow DOM 和 HTML Templates。通过这些技术，开发者可以创建封装良好、可复用、样式隔离的自定义HTML元素。

Custom Elements：定义自定义标签

Custom Elements 允许我们创建新的HTML标签，并为其绑定JavaScript类。浏览器会识别这些自定义标签，并执行对应的逻辑。

使用 customElements.define() 方法注册一个自定义元素，类需继承 HTMLElement 或其子类：

class MyButton extends HTMLElement {
  connectedCallback() {
    if (!this.rendered) {
      this.innerHTML = ``;
      this.rendered = true;
    }
  }
}

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

之后就可以在HTML中使用：<my-button></my-button>。注意：自定义标签名必须包含短横线（-），以避免与标准HTML标签冲突。

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

Shadow DOM：实现样式和结构隔离

Shadow DOM 提供了一个独立的DOM树，与主文档DOM隔离，确保组件内部的样式不会影响外部，外部样式也不会污染组件内部。

在自定义元素中通过 attachShadow() 启用 Shadow DOM：

BeatBot

Splash的AI音乐生成器，AI歌曲制作人！

165

查看详情

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

  connectedCallback() {
    this.shadowRoot.innerHTML = `
     <style>
      .card { border: 1px solid #ccc; padding: 16px; }
     </style>
     <div class="card">
      <slot></slot>
     </div>
    `;
  }
}

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

使用 <slot> 可以插入外部内容，实现内容分发。mode 设置为 'open' 表示可通过 JavaScript 访问 shadowRoot，'closed' 则不可访问。

HTML Templates：预定义结构模板

HTML 的 <template> 标签允许我们定义一段不会立即渲染的DOM结构，可在JS中克隆并插入到页面或 Shadow DOM 中，适合用于组件模板。

示例：

<template id="my-modal-template">
<style>
  .modal { background: white; border: 1px solid #ddd; }
</style>
<div class="modal">
  <h3><slot name="title">默认标题</slot></h3>
  <p><slot name="body"></slot></p>
  <button id="close">关闭</button>
</div>
</template>

在自定义元素中使用：

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