如何在Svelte编译的Web Components中调用attachInternals方法

该需求完全可以实现，核心问题是Svelte组件内部默认的this指向Svelte运行时的组件实例，而非继承自HTMLElement的自定义元素DOM实例，因此直接调用attachInternals()会找不到方法。以下是两种可直接落地的实现方案：

不直接使用Svelte编译生成的自定义元素类，手动继承该类后重写构造函数，在构造阶段调用attachInternals()，同时挂载实例供组件内部访问：

import BaseComponent from './YourComponent.svelte';

class CustomWebComponent extends BaseComponent {
  // 如果要做表单关联自定义元素，必须加这个静态属性
  static formAssociated = true;

  constructor() {
    super();
    // 此时上下文就是HTMLElement实例，符合attachInternals的调用时机要求
    this._internals = this.attachInternals();
  }
}

// 手动注册自定义元素，替换掉Svelte自动注册的逻辑
customElements.define('your-component-tag', CustomWebComponent);

组件内部需要访问ElementInternals实例时，通过组件内元素的根节点拿到宿主元素即可：

<script>
  import { onMount } from 'svelte';
  let rootEl;
  let internals;

  onMount(() => {
    // 拿到shadowRoot对应的宿主元素，也就是我们自定义的CustomWebComponent实例
    const host = rootEl.getRootNode().host;
    internals = host._internals;
    // 后续正常调用API即可，比如设置表单值、更新无障碍状态
    // internals.setFormValue('default value');
  });
</script>

<!-- 给组件根节点绑定引用 -->
<div bind:this={rootEl}>
  组件内容
</div>

高版本Svelte提供了直接获取自定义元素宿主实例的能力，不需要额外写扩展类：

• Svelte 4 版本：先在组件头部开启host传递配置

<svelte:options tag="your-component-tag" customElement={{ host: true }} />

<script>
  let internals;
  // 声明接收Svelte传入的宿主元素实例
  export let host;

  // 宿主传入后立刻调用，保证调用时机符合要求
  $: if (host) {
    internals = host.attachInternals();
  }
</script>

• Svelte 5 版本：直接用内置的$host() rune获取宿主实例，不需要额外配置

<svelte:options tag="your-component-tag" />

<script>
  const host = $host();
  const internals = host.attachInternals();
</script>

• attachInternals()必须在元素首次挂载到DOM之前调用，放在onMount生命周期里调用会触发浏览器报错
• 不需要手动调用attachShadow()，Svelte编译Web Component时会自动创建shadow root，手动重复调用会抛出异常
• 如果要实现表单关联组件，必须给自定义元素类添加static formAssociated = true静态属性，否则无法调用表单相关的API

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