lit-element - 反射属性

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,
    }
  };
}