使用Shadow DOM实现样式封装

技术教程
2025-11-03 23:23:02

Shadow DOM是Web Components标准的一部分，通过创建独立的DOM树实现样式和结构的隔离。使用Element.attachShadow()方法可将Shadow DOM附加到元素上，并通过mode属性控制访问权限。示例中定义了MyComponent类，在constructor中创建Shadow Root并注入HTML与CSS，确保内部样式不泄漏、外部样式不侵入。其优势包括样式隔离、避免命名冲突、提升组件复用性和结构清晰性。需注意：无法直接通过document.querySelector()访问内部元素，继承样式可能需手动传递，部分伪元素不适用。掌握Shadow DOM有助于构建高内聚、可维护的前端组件。

使用shadow dom实现样式封装

在现代Web开发中，组件化是构建可维护应用的关键。使用Shadow DOM可以有效实现样式封装，避免全局样式污染，确保组件内部样式与外部隔离。

什么是Shadow DOM

Shadow DOM是Web Components标准的一部分，允许开发者为元素创建一个独立的DOM树。这个树与主文档的DOM隔离，包括样式和脚本。

通过Shadow DOM，组件内的CSS不会影响页面其他部分，外部样式也不会意外修改组件内部结构。

如何创建带有样式封装的Shadow DOM

使用Element.attachShadow()方法可以将Shadow DOM附加到一个元素上。设置mode: 'closed'或'open'来控制外部访问能力。

以下是一个简单示例：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // 创建Shadow Root
    this.shadow = this.attachShadow({ mode: 'open' });

    // 添加HTML结构
    this.shadow.innerHTML = `
      <style>
        .container {
          padding: 16px;
          background-color: #f0f0f0;
          border-radius: 8px;
          font-family: sans-serif;
        }
        p {
          color: #333;
          margin: 0;
        }
      </style>
      <div class="container">
        <p>这是一个封装样式的组件</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/8666">
                            <img src="https://img.php.cn/upload/webcode/000/000/018/175618440397172.png" alt="ReportPlus数据报表中心小程序">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/8666">ReportPlus数据报表中心小程序</a>
                            <p>ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="ReportPlus数据报表中心小程序">
                                <span>1</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/8666" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="ReportPlus数据报表中心小程序">
                        </a>
                    </div>
                
      </div>
    `;
  }
}

// 定义自定义元素
customElements.define('my-component', MyComponent);

在页面中使用：