Web组件开发规范_Custom Elements与Shadow DOM_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

Web组件开发规范_Custom Elements与Shadow DOM

2025-12-03

浏览次数：次

返回列表

Custom Elements 与 Shadow DOM 是 Web 组件核心技术，前者用于定义自定义标签并控制行为，后者实现样式和结构隔离。1. Custom Elements 通过继承 HTMLElement 并调用 customElements.define() 注册，标签名需含短横线以避免冲突；2. Shadow DOM 通过 attachShadow() 挂载，提供独立 DOM 子树，防止样式互相影响，mode 可设为 open 或 closed 以控制访问权限；3. 结合使用时应采用语义化命名、利用 slot 内容分发、监听属性变化更新 UI，并将样式置于 Shadow DOM 内部以确保封装性，适用于现代浏览器，可构建不依赖框架的高复用性组件。

web组件开发规范_custom elements与shadow dom

在现代前端开发中，Web组件提供了一种构建可复用、封装性强且无需依赖框架的UI组件的方式。其中，Custom Elements 和 Shadow DOM 是 Web 组件的两大核心技术。它们让开发者可以创建自定义 HTML 标签，并为其添加独立的样式和行为，实现真正的组件化开发。

Custom Elements：定义自定义标签

Custom Elements 允许开发者定义自己的 HTML 元素，并通过 J*aScript 控制其行为。浏览器原生支持这类元素，无需引入额外库。

要创建一个 Custom Element，需继承 HTMLElement 并使用 customElements.define() 方法注册。

class MyButton extends HTMLElement {
  constructor() {
    super();
    // 初始化内容或属性
    this.textContent = this.getAttribute('label') || '默认按钮';
  }

  // 可监听属性变化
  static get observedAttributes() {
    return ['label'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'label') {
      this.textContent = newValue;
    }
  }
}

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

使用方式：

注意命名规则必须包含短横线（-），如 my-button，这是为了避免与标准 HTML 标签冲突。

Shadow DOM：实现样式与结构的隔离

Shadow DOM 提供了一个独立的 DOM 子树，与主文档 DOM 隔离。这意味着组件内部的样式不会影响外部页面，外部样式也不会污染组件内部。

Remover

几秒钟去除图中不需要的元素

304 查看详情 Remover

在 Custom Element 构造函数中，可通过 attachShadow() 方法挂载 Shadow DOM。

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

shadow.innerHTML = <br> <style><br> .card {<br> border: 1px solid #ddd;<br> padding: 16px;<br> border-radius: 8px;<br> background: #f9f9f9;<br> }<br> </style><br> <div class="card"><br> <slot></slot> <br> </div><br> ;
}
}

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

使用方式：

这是一段卡片内容。

Shadow DOM 的 mode 可设为 open 或 closed。设为 open 时，J*aScript 可通过 element.shadowRoot 访问内部结构；closed 则不可访问，增强封装性。