Svelte自定义元素调用setAttribute更新属性不生效问题

• Svelte 编译自定义元素时默认仅在元素初始化阶段读取 DOM 节点的 attribute 赋值给对应组件 props，不会主动监听 attribute 的后续变更。调用 setAttribute 修改 name 属性时，组件内部的响应式变量无法感知到该变化，因此不会触发页面更新。
• Svelte 未默认开启全量 attribute 观察，是出于性能层面的考量，避免产生不必要的监听开销。

方案1：直接修改元素实例的 property（无需改动组件代码） #

自定义元素实例上会直接挂载组件导出的所有响应式属性，直接修改该属性即可触发更新：

var mc = document.querySelector('my-component');
mc.name = 'John';

方案2：配置组件开启 attribute 观察 #

如果需要兼容 setAttribute 的更新方式，在组件的 <svelte:options> 中显式声明需要监听的 attribute 列表即可：

<svelte:options 
  tag="my-component" 
  customElement={{
    observe: ['name']
  }}
/>

<script>
  export let name;
</script>

<div>Hello {name}</div>

重新编译后，调用 setAttribute('name', 'John') 即可正常触发页面更新。

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