反射属性

Question

和使用将(内部)属性更改传递给(外部)观察属性的用途是什么？如果可能的话，请举一个外向的例子。

提亚

Answer 1

一个主要的用例是，该属性随后可以由CSS属性选择器使用。通过这种方式，您可以轻松地根据状态执行条件样式设置：

:host([selected]) .foo {
  background-color: gray;
}

:host([mode="foo"]) .bar {

}

另一个用例可以将属性反映为aria属性，由屏幕阅读器解释：

static get properties() {
  return {
    checked: {
      type: Boolean,
      attribute: 'aria-checked',
      reflect: true,
    }
  };
}