如何让LitElement响应式属性支持ECMA 2022 #前缀原生私有字段？

原生#前缀私有字段是ES2022规范定义的硬私有实现，和普通对象属性的底层存储、访问逻辑完全不同：它不会以字符串键的形式挂载到实例对象上，无法通过字符串键名寻址访问，自然也不能被Lit默认的属性拦截逻辑捕获。
你在properties配置中写的'#somePrivateField'，本质是声明了一个键名就是字符串"#somePrivateField"的普通公开属性，和你类里声明的#somePrivateField硬私有字段完全是两个独立的存储位，赋值私有字段时根本不会命中Lit的响应式拦截逻辑，自然不会触发视图更新。

1. 手动触发更新（零依赖适配原生硬私有） #

不需要将私有字段加入properties配置，通过setter封装赋值逻辑，赋值后手动调用requestUpdate触发渲染即可：

class ExtendedLitElement extends LitElement {
  #somePrivateField;

  set somePrivateField(value) {
    const oldValue = this.#somePrivateField;
    this.#somePrivateField = value;
    // 传入字段名和旧值，可配合updated生命周期做差异处理
    this.requestUpdate('somePrivateField', oldValue);
  }

  get somePrivateField() {
    return this.#somePrivateField;
  }
}

后续通过this.somePrivateField = [1,2,3]赋值就会自动触发更新。如果私有字段的赋值点很少，也可以每次直接赋值后单独调用this.requestUpdate()，不需要额外封装getter/setter。

2. 使用@state装饰器（装饰器语法下的最优解） #

如果项目支持TypeScript或者装饰器语法，直接用Lit内置的@state装饰器标记私有字段即可，Lit会自动将其识别为内部响应式状态，不需要额外配置properties：

class ExtendedLitElement extends LitElement {
  @state()
  #somePrivateField;
}

这种写法下直接给this.#somePrivateField赋值就会自动触发视图更新，且该状态不会同步为DOM元素的公开attribute，完全符合私有字段的封装需求。

3. 沿用_前缀约定（无适配成本） #

如果不需要语言层面的强制私有约束，继续使用行业惯例的_前缀标识内部属性即可，直接加入properties配置就能获得响应式能力：

class ExtendedLitElement extends LitElement {
  static properties = {
    _somePrivateField: { type: Array, state: true }
  }

  _somePrivateField;
}

配置中添加state: true可以让该属性不映射为公开的DOM attribute，封装效果和硬私有接近，只是没有语法层面的访问限制。

注意：不存在任何方案可以直接把#开头的硬私有字段作为字符串键注册到properties配置中，硬私有字段本身就没有可枚举的字符串键名，这类写法完全不会生效。

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