如何在发光元素中反映属性而不是触发重发器？

Question

我正在转换一个自定义元素下拉到点燃元素。现有元素显示下拉选项的方式是在元素上设置一个expanded布尔属性，这些选项通过css显示/隐藏：

my-element:not([expanded]) .options-container {
  display: none;
}

my-element[expanded] .options-container {
  display: block;
}

该组件不需要执行任何重发程序，因为逻辑都在css中。

如何使用点燃元素来实现这种行为，而不是重新划分组件呢？如果有很多下拉选项，重命名可能会花费很大的代价。

我尝试实现一个shouldUpdate，如果只更改了expanded就返回expanded，但这会导致lit元素在通过属性设置时不会将expanded反映给属性，这是通过css显示/隐藏属性所必需的。

这就是我所拥有的，但不起作用：

class MyDropdown extends LitElement {
  static get properties() {
    return {
      expanded: { type: Boolean, reflect: true },
      ...
    };
  }

  shouldUpdate(changedProperties) {
    if (changedProperties.has('expanded') && changedProperties.size === 1) {
      return false;
    }
    return true;
  }

  // disable shadow-dom
  createRenderRoot() {
    return this;
  }
}

请注意，我还没有使用影子dom，不确定这是否会改变解决方案。我用的是发光元件2.2.1。

Answer 1

其想法是不使用LitElement的 static properties或@Property装饰器。编写您自己的属性实现如下：

class MyDropdown extends LitElement {

  _expanded = false;

  get expanded() {
    return this._expanded;
  }

  set expanded(val) {
    this._expanded = val;

    // Manually setting the property and reflecting attribute.
    if (val) {
      this.setAttribute('expanded', '');
    } else {
      this.removeAttribute('expanded');
    }
  }

  // disable shadow-dom
  createRenderRoot() {
    return this;
  }
}

类似地，您可以侦听attributeChangedCallback生命周期事件，并在用户更改属性而不是属性时调整_expanded属性。