原生JS实现无Shadow DOM的包装自定义元素 替代Slots功能方案咨询

以下是3种可落地的实现方案，可根据项目场景选择：

方案1：运行时原地结构注入 + 自定义元素生命周期兼容 #

该方案无需构建工具支持，改造成本最低，适合无工程化体系的项目。
实现逻辑：

• 自定义元素初始化时先标记已初始化状态，避免重复执行逻辑
• 先留存所有原始子节点的引用，再插入<label>和包裹用<div>节点
• 批量移动子节点到包裹容器时，给自定义元素子节点加临时标记，跳过重复的connectedCallback逻辑

代码示例：

// form-control 自定义元素实现
class FormControl extends HTMLElement {
  #initialized = false;
  connectedCallback() {
    if (this.#initialized) return;
    this.#initialized = true;

    // 留存原始子节点引用
    const originChildren = [...this.children];
    // 插入基础结构
    const label = document.createElement('label');
    label.textContent = this.getAttribute('label') || '';
    const inputWrapper = document.createElement('div');
    this.prepend(label, inputWrapper);

    // 批量移动子节点
    originChildren.forEach(node => {
      // 自定义元素加临时移动标记
      if (node.tagName.includes('-')) node.dataset.__slotMoving = '1';
      inputWrapper.appendChild(node);
      if (node.dataset.__slotMoving) delete node.dataset.__slotMoving;
    });
  }
}
customElements.define('form-control', FormControl);

子自定义元素兼容逻辑（侵入性极低）：

class YourCustomElement extends HTMLElement {
  connectedCallback() {
    // 移动期间跳过逻辑执行
    if (this.dataset.__slotMoving) return;
    // 原有业务逻辑
  }
}

方案2：CSS模拟结构，零DOM操作 #

如果仅需要实现样式层面的嵌套效果，不需要在包裹<div>上挂载额外逻辑（比如校验提示、事件监听），可以完全避免DOM操作：

• 直接在<form-control>下插入<label>节点，不需要额外的包裹<div>
• 把原本要写在包裹<div>上的样式直接绑定到<form-control>，通过CSS选择器匹配子表单元素，和嵌套结构的样式表现完全一致

代码示例：

form-control {
  /* 原包裹div的样式：边距、边框、内边距等 */
  margin-bottom: 1rem;
  padding: 0.5rem;
}
form-control > label {
  display: block;
  margin-bottom: 0.5rem;
}
form-control > input, form-control > select {
  /* 原嵌套在div内的表单元素样式 */
  width: 100%;
}

方案3：构建时预转换结构，零运行时副作用 #

如果项目使用Vite、Webpack等构建工具，优先选择该方案，完全不会触发DOM节点移动相关的生命周期问题：

• 写一个简单的HTML转换插件，在构建阶段扫描所有<form-control>标签，自动给内部子节点套上<label>和包裹<div>
• 浏览器运行时拿到的就是最终结构，不需要做任何DOM操作

针对通用包装类自定义元素的需求，可以把方案1的逻辑封装成通用基类，所有需要类Slots能力的无Shadow DOM自定义元素都继承该基类，仅需配置要插入的节点、包裹容器属性即可，不需要重复实现逻辑。

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