使用 ES @Decorators 创建自定义元素

[mantou132]

定义自定义元素最简单的形式是使用装饰器：

@customElement('my-element')
class MyElement extends GemElement {
  @attribute name: string;
}

这样不仅为 MyElement 元素申明了字段，又表示了这个字段是以监听的，修改它能更新元素，现在，可以使用规范中的装饰器了。

https://github.com/tc39/proposal-decorators

TypeScript 5.0 就实现了，esbuild 还没有实现，所以 vite 开箱就用暂不支持 ES Decorators。

新装饰器和 TS 以前的装饰器最大的区别总结是：以前的装饰器是针对 Class 或者 Class 的 prototype，而现在装饰器是针对装饰目标。

比如，方法装饰器：

function logged(method: Function, context) {
  // 这里可以重写方法
}

字段装饰器：

function field(_: undefined, context) {
  // 自定义字段初始化函数
  return function initialization(value)  {
    return value;
  }
}

装饰器运行时访问不到 prototype 了，要想在 prototype/constructor（非 Class 装饰器）上做点动作需要在构造过程中（new）进行，比如一个字段装饰器修改 constructor 上的字段 observedAttributes:

function field(_: undefined, context) {
  // 自定义字段初始化函数
  return function initialization(value)  {
    this.constructor.observedAttributes = [context.name];
    return value;
  }
}

在 Web Components 中，如果想监听 attribute 的变化，需要在定义元素时就能从 constructor 上获取 observedAttributes, 所以新版的装饰器不在满足这个要求了;

只能 hack setAttribute，让 attribute 修改时更新元素。可惜，这个方法不在支持 DevTools 了，也就是说在 Devtools 中修改自定义元素的被监听的 attribute 不会自动更新元素