J*aScriptWeb组件_CustomElements与ShadowDOM详解_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScriptWeb组件_CustomElements与ShadowDOM详解

2025-11-18

浏览次数：次

返回列表

Custom Elements 和 Shadow DOM 结合实现可复用、样式隔离的 Web 组件：通过定义类继承 HTMLElement 并注册自定义标签，结合 attachShadow 创建独立 DOM 子树，利用 slot 分发内容，实现结构与样式的完全封装，支持属性监听与动态渲染，构建原生 J*aScript 组件。

javascriptweb组件_customelements与shadowdom详解

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

Custom Elements：定义自己的 HTML 标签

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

基本步骤如下：

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

注意：自定义标签名必须包含短横线（-），例如 my-button、user-card，避免与标准 HTML 标签冲突。

示例：

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 不会影响外部页面，外部样式也不会轻易“穿透”进来。

关键特性：

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

Shadow DOM 的优势在于：

ChatCut

AI视频剪辑工具

1086 查看详情 ChatCut

样式隔离：组件内样式不会污染全局
结构隐藏：内部实现细节对外不可见
避免选择器冲突：即使使用 .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);

使用：