如何实现嵌套Shadow DOM的层叠定位？

可以实现嵌套Shadow DOM的层叠定位。先看常规DOM里的默认层叠效果：

常规DOM的嵌套层叠示例 #

.d1 {
  width: 150px;
  height: 150px;
  background-color: lightseagreen;
}
.d2 {
  width: 100px;
  height: 100px;  
  background-color: darkslateblue;

}
.d3 {
  width: 50px;
  height: 50px;
  background-color: lightgray;
}

<div class="container">
  <div class="d1">
    <div class="d2">
      <div class="d3">
      </div>
    </div>
  </div>
</div>

嵌套Shadow DOM的层叠实现 #

在Shadow DOM中，由于DOM封装特性，需要通过exportparts属性将内部元素的part暴露给外部，同时处理嵌套组件的part传递，才能实现类似常规DOM的层叠定位效果。以下是完整实现代码：

自定义组件脚本

let id = 0;
const depth = 3;
customElements.define('box-component', class extends HTMLElement {
  constructor() {
    super();
    
    if (id > depth) 
        return;
    this.id = id++;
    
    const template = document.getElementById("box-template");
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = template.innerHTML;
    
    // 最外层组件无需导出part，直接返回
    if (id === 0)
        return;
    
    // 获取当前组件内带part属性的元素
    const parts = [...this.shadowRoot.children]     
      .filter(elem => elem.getAttribute('part'));
    
    let thisExportParts = null;
    let childExportParts = null;
    
    // 为当前组件的part设置别名，便于外部区分层级
    thisExportParts = parts.map(elem => [
      [elem.getAttribute('part'), `${elem.getAttribute('part')}${this.id}`].join(':')
    ].join(','));
    
    // 获取子组件的exportparts配置，将子组件暴露的part一并向上导出
    if (this.shadowRoot?.children) {
        const childComponent = [...this.shadowRoot.children].find(elem => elem.shadowRoot);
      if (childComponent) {
        const fullChildExportParts = childComponent.getAttribute('exportparts');
        if (fullChildExportParts) {
          childExportParts = fullChildExportParts.split(',').map(part => {
            return part.includes(':') ? part.split(':')[1] : part;
          }).join(',');
        }
      }
    }
    // 设置当前组件的exportparts，合并自身和子组件的暴露part
    this.setAttribute('exportparts', [thisExportParts, childExportParts].filter(Boolean).join(','));
  }
});

外部样式（控制Shadow DOM内部元素）

box-component::part(box1) {
  width: 150px;
  height: 150px;
  background-color: lightseagreen;
}
box-component::part(box2) {
  width: 100px;
  height: 100px;
  background-color: darkslateblue;
}
box-component::part(box3) {
  width: 50px;
  height: 50px;
  background-color: lightgray;
}

模板与页面结构

<template id="box-template">
  <style> 
  </style>
  <div part="box"></div> 
  <box-component></box-component>
</template>

<box-component class="container"></box-component>

关键说明 #

• exportparts属性用于将Shadow DOM内部的part元素暴露给外部样式控制，嵌套场景下需要父组件将子组件暴露的part继续向上导出，确保最外层能控制所有层级的内部元素。
• 通过为每个层级的part设置别名（如box:box1），可以在外部样式中精准定位不同层级的Shadow DOM元素，实现类似常规DOM的层叠视觉效果。

内容的提问来源于stack exchange，提问作者OfirD