附加Shadow DOM时如何保留原DOM元素的子节点？

嘿，这个问题我太熟了！其实这是Shadow DOM设计时的一个默认行为——当你给元素挂上Shadow DOM之后，浏览器就会把渲染焦点转到Shadow内部的内容上，宿主原来的那些子元素（业内叫Light DOM）就会被暂时“藏”起来，但完全可以通过<slot>元素把它们重新展示出来，甚至还能自定义它们在Shadow里的位置！

先搞懂背后的逻辑 #

你提到的文档里那句“Shadow宿主的子元素通常不会生成盒子，但可被显式提取……”，核心就是说：Light DOM的内容不会自动出现在页面上，需要我们在Shadow DOM里主动用<slot>来“提取”并渲染它们。

具体解决方法 #

1. 默认插槽：一键展示所有原元素

如果只是想把根div原来的所有子元素都保留显示，只需要在Shadow DOM里添加一个不带name属性的<slot>标签就行。它会自动把所有没指定slot属性的Light DOM子元素，全部分发到这个插槽的位置。

举个修改后的代码例子：

<div id="root">
  <div>原子元素1</div>
  <div>原子元素2</div>
</div>

<script>
  const root = document.getElementById('root');
  // 挂载Shadow DOM（open模式允许外部访问，closed模式则不行，但插槽功能不受影响）
  const shadowRoot = root.attachShadow({ mode: 'open' });
  // 加入默认插槽，把原Light DOM的子元素都拉进来
  shadowRoot.innerHTML = `
    <div>Shadow里新增的子元素</div>
    <slot></slot> <!-- 这里会自动插入根div原来的两个子元素 -->
  `;
</script>

2. 具名插槽：精准控制每个元素的位置

如果想更精细地安排原元素在Shadow DOM里的展示位置，可以给原Light DOM的子元素加上slot属性，然后在Shadow DOM里用带对应name的<slot>来指定它们的位置。

示例代码：

<div id="root">
  <div slot="old-item-1">原子元素1</div>
  <div slot="old-item-2">原子元素2</div>
</div>

<script>
  const root = document.getElementById('root');
  const shadowRoot = root.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <div class="shadow-header">Shadow里的头部元素</div>
    <!-- 把原元素1放到这里 -->
    <div class="old-item-container">
      <slot name="old-item-1"></slot>
    </div>
    <div class="shadow-content">Shadow里的内容区域</div>
    <!-- 把原元素2放到这里 -->
    <div class="old-item-footer">
      <slot name="old-item-2"></slot>
    </div>
  `;
</script>

这样你就能同时看到Shadow里的新元素，以及原根div的两个子元素了，完全按照你想要的方式展示！

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