[gem] CSS state and js state

[mantou132]

1. 其他装饰字段不要直接赋值，但是 @state 确是要赋值的
2. 容易和 js state 混淆

下面这个方案和 state 一样怎么保证类型：

class MyElement extends HTMLElement {
  cssState = {}
  state = {}

  updated = () => {
    this.setState({ });
    this.setCSSState({ });
  }
}

[mantou132]

like emitter:

• 继承
• 同时具备访问和设置功能
• 只需要一个类型标记

class MyElement extends HTMLElement {
  @state state: StateFn<{a: number}> = { a: 1 }
}

[mantou132]

取消 @state 。自动在初始化时将 state 中的 Boolean 值转换为 css 状态

这个方案不能继承，只有装饰器才能继承字段值 // 目前状态也不能继承

class My {
  state = {  }

  mounted () {
    this.setState()
  }
}

[mantou132]

修改 js state：

class My {
  #state = createState<State>({ a: 2 })

  render() {
    this.#state.a;
    this.#state({ a: 1 })
  }
}

怎么让 devtools 读取？// 使用 internals

css state 只适合用 @state:

• 文档生成
• devtools 读取
• 外部元素读取和修改 // 例如 duoyun-ui