Svelte中Web Component失效：能否延迟构造及循环使用？

问题根源 #

Svelte编译器默认会将未标记为自定义元素的标签当作普通DOM元素处理，甚至会临时拆分它们的嵌套结构，导致你的layer-list在构造/connectedCallback执行时内部为空，后续才会被Svelte重新插入，从而让Web Component的初始化逻辑失效。

解决方案 #

1. 配置Svelte编译器识别自定义元素

修改svelte.config.js，告诉Svelte哪些是自定义元素，避免它干涉标签的渲染结构：

// svelte.config.js
export default {
  compilerOptions: {
    // 方式一：全局启用自定义元素模式
    customElements: true,
    // 方式二：仅指定需要识别的自定义元素标签
    // customElements: ['layer-list', 'item']
  }
};

配置后Svelte会保留layer-list与item的嵌套关系，不会提前拆分内部元素。

2. 调整Web Component逻辑，适配Svelte渲染时机

不要在构造函数中处理子元素（此时DOM尚未挂载，子元素还未进入父容器），改用connectedCallback，并针对动态内容（如{#each}循环）添加监听：

class LayerList extends HTMLElement {
  connectedCallback() {
    // 防止重复初始化
    if (this._initialized) return;
    this._initialized = true;

    // 处理已存在的子元素
    this.processItems(this.querySelectorAll('item'));

    // 监听子元素变化，适配动态渲染场景
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        const newItems = Array.from(mutation.addedNodes).filter(node => node.tagName === 'ITEM');
        if (newItems.length) {
          this.processItems(newItems);
        }
      });
    });

    observer.observe(this, { childList: true });
  }

  // 封装item元素的处理逻辑
  processItems(items) {
    items.forEach(item => {
      const color = item.getAttribute('color');
      const label = item.textContent;
      // 这里写入你的业务处理逻辑
    });
  }
}

customElements.define('layer-list', LayerList);

// 必须注册item为自定义元素（若之前未注册）
class Item extends HTMLElement {}
customElements.define('item', Item);

3. 正常使用{#each}循环

完成上述配置和逻辑调整后，你可以直接按需求使用循环渲染：

<layer-list>
  {#each layers as l}
    <item color="{l.color}">{l.name}</item>
  {/each}
</layer-list>

当layers数据更新时，Svelte会自动渲染对应的item元素，layer-list内的监听逻辑会捕捉到新增元素并完成处理。

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