在React中调用Lit自定义Web Component时遇类字段遮蔽错误

核心原因 #

Lit 自定义元素的属性变更检测依赖ES6访问器（getter/setter）——当你用@property()装饰器声明属性时，Lit会自动为该属性生成对应的访问器，一旦属性值被修改，访问器会触发组件的更新逻辑。

而你开启了Babel类属性插件的loose: true模式，这个模式下类字段会被编译成直接在实例上赋值（比如this.layout = 'grid'），这种直接赋值会直接覆盖Lit为属性生成的访问器，导致属性变化时Lit完全感知不到，自然无法触发组件更新。

另外，legacy: true的装饰器配置和loose类属性结合时，会打乱装饰器的执行顺序：Lit的@property()装饰器本应先于类字段生成访问器，但loose模式下类字段的赋值会提前执行，直接覆盖了还没生效的访问器，这进一步加剧了问题。

修复步骤 #

• 把@babel/plugin-proposal-class-properties的loose设为false，这样类字段会通过Object.defineProperty定义，不会覆盖Lit生成的访问器。
• 如果你需要保留legacy装饰器，确保@property()装饰器写在对应类字段的上方，保证装饰器先执行（不过改loose模式是最直接有效的解决方式）。
• 在React中操作自定义元素属性时，尽量通过元素实例的setProperty方法（比如ref.current.setProperty('layout', 'list')），或者直接使用元素的属性赋值（而非类字段方式），确保触发Lit的访问器逻辑。

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