Chrome扩展中设置Svelte生成的自定义元素属性不生效怎么办

问题原因 #

• 核心触发原因是Chrome扩展的上下文隔离机制：如果你的Svelte自定义元素是在扩展的content script上下文中注册的，那么content script和页面主JS上下文相互隔离，仅共享DOM树结构。
  浏览器控制台默认处于页面主上下文，此时你直接给DOM元素赋值mc.name = 'John'，只是给DOM对象新增了一个普通JS属性，无法触发Svelte注入到自定义元素原型上的响应式setter（该setter仅在content script上下文生效），所以组件不会更新。
• 你可以尝试将控制台的执行上下文切换为你的扩展对应的content script，再执行赋值操作，就会发现更新逻辑和普通HTML环境完全一致。

解决方法 #

可根据使用场景选择以下任意方案：

• 方案1：修改HTML attribute触发更新
  Svelte自定义元素默认会自动同步prop和同名attribute（驼峰命名的prop会自动映射为短横线命名的attribute），修改attribute的行为不受上下文隔离限制，可直接触发组件更新：

  const mc = document.querySelector('my-component');
  mc.setAttribute('name', 'John');
  

• 方案2：在content script上下文执行更新逻辑
  如果更新操作本身是扩展逻辑的一部分，直接把属性赋值代码写在content script中即可，该上下文的代码可以直接调用自定义元素的响应式setter，无需额外适配。
• 方案3：调整content script运行上下文（不推荐）
  如果你确实需要在页面主上下文直接操作自定义元素的prop，可以在扩展的manifest.json中给对应content script配置"world": "MAIN"，让注册自定义元素的代码运行在页面主上下文，此时页面侧也能直接访问到响应式setter。但该配置会打破扩展的上下文隔离安全机制，仅在你完全可控页面环境的场景下使用。

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