JavaScriptWeb组件：CustomElements与ShadowDOM解析

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript Web组件：Custom Elements与Shadow DOM详解》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

Web组件通过Custom Elements和Shadow DOM实现可重用、样式隔离的自定义元素。1. Custom Elements允许创建带JavaScript类的自定义HTML标签，使用customElements.define()注册，标签名需含短横线；2. Shadow DOM提供隔离DOM树，通过attachShadow({mode: 'open'})创建，确保内部CSS与外部互不干扰；3. 两者结合可构建高度封装的独立组件，适用于设计系统、嵌入式小工具等场景，且需注意事件重定向和选择器作用域问题。

Web组件是一组浏览器原生支持的API，允许你创建可重用、封装良好的自定义HTML元素。其中，Custom Elements 和 Shadow DOM 是两个核心部分。它们让你能在不依赖框架的前提下构建独立、样式隔离、行为清晰的组件。

Custom Elements：定义自己的HTML标签

Custom Elements 允许你创建新的HTML标签，并为其绑定JavaScript类。你可以控制元素的生命周期，比如何时被添加或移除。

使用 customElements.define() 方法注册一个自定义元素。标签名必须包含短横线（-），这是为了避免和未来HTML标准冲突。

示例：创建一个简单的问候组件

class GreetingElement extends HTMLElement {
  constructor() {
    super();
    const name = this.getAttribute('name') || 'Guest';
    this.innerHTML = `<p>Hello, ${name}!</p>`;
  }
}
customElements.define('my-greeting', GreetingElement);

之后就可以在HTML中使用：

<my-greeting name="Alice"></my-greeting>

Shadow DOM：实现样式与结构的封装

Shadow DOM 提供了一个隔离的DOM树，它挂载在元素上但与主文档DOM分离。这意味着组件内部的CSS不会影响外部页面，外部样式也不会“泄漏”进组件。

通过 this.attachShadow({ mode: 'open' }) 创建Shadow DOM。mode 可为 'open'（可在JS中访问）或 'closed'（不可访问）。

改进上面的例子，加入Shadow DOM：

class GreetingElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const name = this.getAttribute('name') || 'Guest';

    // 组件内部结构
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `<p>Hello, ${name}!</p>`;

    // 添加样式
    const style = document.createElement('style');
    style.textContent = `
      p { color: blue; font-family: sans-serif; }
    `;

    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}
customElements.define('my-greeting', GreetingElement);

此时，组件内的蓝色文字样式不会影响页面其他

标签。

结合使用：构建真正独立的组件

Custom Elements 定义行为和标签，Shadow DOM 提供视觉封装。两者结合，可以创建高度复用、互不干扰的UI组件。

常见应用场景包括：

• 设计系统中的按钮、卡片、模态框
• 嵌入式小工具（如天气插件、评分组件）
• 需要避免样式冲突的第三方组件

注意点：

• Shadow DOM 内不能直接使用 document.querySelector，需在shadow根上调用
• 事件在跨Shadow边界时会重定向，保持封装性
• 老式浏览器需引入polyfill支持

到这里，我们也就讲完了《JavaScriptWeb组件：CustomElements与ShadowDOM解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！