如何在litelect上保持持久的课程-DEV365 开发者社区

使用LIT时，有时您希望主机元素具有持久的类名称。一个很好的例子是，如果我使用鞋带，我希望我的元素看起来像这样：

<sl-button class="sl-button"></sl-button>

这样，如果用户在另一个名称空间下注册按钮，则他们仍然可以在CSS中使用.sl-button {}或使用QuerySelectors来定位所有实例。有许多用例，但让我们忘记“为什么”，而是专注于方法。

这是我找到将持久班保持在一小盘上的最有效方法。

import { LitElement } from "lit"
class MyElement extends LitElement {
  static properties = {
    class: { reflect: true }
  }

  connectedCallback () {
    super.connectedCallback()
    this.classList.add("my-element")
  }

  willUpdate (changedProperties) {
    if (changedProperties.has("class")) {
      this.classList.add("my-element");
    }
  }
}

或为您的人们使用装饰师：

import { LitElement } from "lit"
import { property } from "lit/decorators.js"

class MyElement extends LitElement {
  @property({ reflect: true }) class

  connectedCallback () {
    super.connectedCallback()
    this.classList.add("my-element")
  }

  willUpdate (changedProperties) {
    if (changedProperties.has("class")) {
      this.classList.add("my-element");
    }
  }
}

我确定还有另一种方法可以做到这一点，但这是对我有用的方式！