Lit框架中Slot内组件的updated生命周期属性变更检测失效问题

我在使用Lit框架开发时遇到一个问题：通过Slot加载的组件（如示例中的grand-child-component）的属性myProperty值发生变更时，无法在updated生命周期回调中检测到该变更。

示例代码 #

parentComponent.ts

@property({ type: Object })
public myProperty: MediaStream;

constructor() {
  super();
  this.myProperty = new MediaStream();
}

triggerUpdate() {
  navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: true,
     })
    .then(async (stream) => {
      this.myProperty = stream;
    });
}

render() {
  return html`
    <child-component>
      <div slot="grand-child-slot">
        <grand-child-component
          .myProperty="${this.myProperty}"
        >
        </grand-child-component>
      </div>
    </child-component>
  `
}

grandChildComponent.ts

@property({ type: Object })
public myProperty: MediaStream;

updated(changedProperties) {
   super.updated(changedProperties);
   if (changedProperties.has('myProperty')) {
     console.log(`Property "myProperty" has been updated to: ${this.myProperty}`);
   }
 }

当myProperty更新为新值时，console.log始终不会执行。只有重新加载Slot内的grand-child-component时才能正常检测到变更，我期望无需重新加载模板即可实时检测到属性变更。请问这一问题在Slot场景下出现的原因是什么？

问题原因与解决方案 #

核心问题：属性绑定语法错误 #

你在父组件模板中给grand-child-component绑定属性的写法有误：

.myProperty="${this.myProperty}"

这种写法会把this.myProperty（MediaStream对象）强制转换为字符串（结果是[object MediaStream]），而非直接传递对象引用。当你更新this.myProperty为新的MediaStream对象时，转换后的字符串值并没有变化，因此grand-child-component的myProperty属性实际并未被更新，自然不会触发updated回调。

正确的属性绑定写法 #

去掉属性值的双引号，使用Lit的原生属性绑定语法：

.myProperty=${this.myProperty}

这样会直接传递MediaStream对象的引用，当父组件的this.myProperty更新为新对象时，Lit会自动检测到变更并更新grand-child-component的属性，进而触发其updated生命周期回调。

Slot场景的补充说明 #

Slot内容属于父组件的渲染上下文（分布式内容），父组件的属性变更会触发自身重新渲染，进而更新Slot内组件的绑定属性。只要绑定语法正确，无需重新加载模板，属性变更就能正常传递到Slot内的组件，触发对应的生命周期回调。

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