非Shadow DOM环境下Web Components默认插槽失效问题的解决咨询

你好呀！你的问题我太懂了——很多刚接触Web Components的同学都会踩这个坑：<slot>元素确实是Shadow DOM专属的特性，在Light DOM环境里直接用它是完全起不到插槽作用的，这也是你现在内容跑到分隔线下面的原因。

那在不能用Shadow DOM的情况下，我们可以通过手动操作元素的子节点来模拟插槽的效果，具体修改方案如下：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
class MyComponent extends HTMLElement {
  connectedCallback() {
    // 先把<my-component>里原有的内容（子节点）保存下来
    const originalContent = Array.from(this.childNodes);
    // 清空当前元素的内容，避免原内容残留
    this.innerHTML = '';

    // 按顺序添加我们需要的结构：hr → 原内容 → hr
    this.appendChild(document.createElement('hr'));
    originalContent.forEach(node => this.appendChild(node));
    this.appendChild(document.createElement('hr'));
  }
}
customElements.define('my-component', MyComponent);
</script>
<my-component>
  This text shall be placed between the two rulers, not below them.
</my-component>
</body>
</html>

这里的核心思路很简单：

• 先捕获Light DOM中自定义元素内部的所有原始子节点（包括文本节点、元素节点这些）
• 清空元素原有内容后，按我们想要的结构重新拼接：先加第一个<hr>，再把原始内容插进去，最后加第二个<hr>

至于你原来的代码为什么不行？是因为当你直接用this.innerHTML = '<hr><slot></slot><hr>'时，会把<my-component>里原本的内容直接覆盖掉，而<slot>在Light DOM里又完全不生效，浏览器只会渲染出两个分隔线，原本的文本内容就被挤到元素外面去了，所以才会出现在分隔线下方的情况。

你后来提到的文章说插槽只支持Shadow DOM，这个结论是完全正确的。<slot>以及对应的slotchange事件都是Shadow DOM规范的一部分，Light DOM并没有实现这个特性，所以必须用手动操作DOM的方式来替代插槽的功能。

内容来源于stack exchange