JavaScriptWeb组件_CustomElements与ShadowDOM详解

custom elements 和 shadow dom 结合实现可复用、样式隔离的 web 组件：通过定义类继承 htmlelement 并注册自定义标签，结合 attachshadow 创建独立 dom 子树，利用 slot 分发内容，实现结构与样式的完全封装，支持属性监听与动态渲染，构建原生 javascript 组件。

Custom Elements 和 Shadow DOM 是 Web Components 的两个核心部分，它们让开发者可以创建可复用、封装良好的自定义 HTML 元素。结合使用，能够构建真正独立、样式隔离、行为清晰的组件，直接在原生 JavaScript 中实现类似框架的功能。

Custom Elements：定义自己的 HTML 标签

Custom Elements 允许你创建新的 HTML 标签，并为其定义对应的行为。通过 customElements.define() 方法注册一个类，这个类继承自 HTMLElement 或其子类，就可以在页面中使用自定义标签。

基本步骤如下：

• 定义一个类，继承自 HTMLElement
• 在类中使用 constructor 初始化元素（必须调用 super()）
• 通过 connectedCallback 在元素插入 DOM 时执行逻辑
• 可选地使用 attributeChangedCallback 监听属性变化
• 调用 customElements.define('my-element', MyElement) 注册组件

示例：

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

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

  connectedCallback() {
    const title = this.getAttribute('title') || '默认标题';
    this.shadowRoot.innerHTML = `
      <style>
        .card { border: 1px solid #ddd; padding: 16px; margin: 8px; }
        h3 { color: #333; }
      </style>
      <div class="card">
        <h3>${title}</h3>
        <slot></slot>
      </div>
    `;
  }
}

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

使用方式：

<my-card title="欢迎卡片">这里是内容</my-card>

Shadow DOM：实现真正的样式和结构封装

Shadow DOM 提供了一个独立的 DOM 子树，它与主文档 DOM 隔离，包括样式和事件。这意味着你在 Shadow Root 中定义的 CSS 不会影响外部页面，外部样式也不会轻易“穿透”进来。

关键特性：

Jenni AI

使用最先进的 AI 写作助手为您的写作增光添彩。

下载

• 通过 this.attachShadow({ mode: 'open' }) 创建 Shadow Root
• mode 可为 'open'（可通过 JS 访问）或 'closed'（不可访问）
• 所有内部结构和样式都挂载到 shadowRoot 上
• 支持 实现内容分发，保留原有 HTML 内容的灵活性

Shadow DOM 的优势在于：

• 样式隔离：组件内样式不会污染全局
• 结构隐藏：内部实现细节对外不可见
• 避免选择器冲突：即使使用 .title 这样的通用类名也不怕

示例说明 slot 用法：

this.shadowRoot.innerHTML = `
  <div class="wrapper">
    <header><slot name="header"></slot></header>
    <main><slot>默认内容</slot></main>
  </div>
`;

对应使用：

<my-component>
  <span slot="header">这是头部</span>
  <p>这是主体内容</p>
</my-component>

结合使用：构建完整 Web 组件

Custom Elements 负责定义标签和行为，Shadow DOM 负责封装 UI 和样式，两者结合是 Web Components 的标准实践。

常见模式包括：

• 在 constructor 中 attachShadow 并初始化内部结构
• 在 connectedCallback 中渲染或绑定事件
• 监听 attributes 列表并通过 observedAttributes 静态属性指定需要监控的属性
• 使用 attributeChangedCallback 响应属性更新

增强示例：响应属性变化

class MyToggle extends HTMLElement {
  static get observedAttributes() {
    return ['on'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'on') {
      this.render();
    }
  }

  render() {
    const isOn = this.getAttribute('on') === 'true';
    this.shadowRoot.innerHTML = `
      <button style="background:${isOn ? 'green' : 'gray'}; color:white">
        ${isOn ? '开启' : '关闭'}
      </button>
    `;
  }
}

customElements.define('my-toggle', MyToggle);

使用：

<my-toggle on="true"></my-toggle>