如何使发光组件类似于原生HTML

Question

在我们的lit web组件库中，我们希望允许用户以最HTML的方式添加web组件。有没有一种方法可以将布尔属性传递到如下组件中？

<custom-button disabled> // -> true 
<custom-button> // -> undefined -> (lit) false

目前看起来是这样的：

<custom-button disabled="true"

我们希望去掉布尔赋值，如果它是真的，只保留单词"disabled"，就像对原生HTML元素所做的一样

Answer 1

当想要在lit html模板中传递布尔属性时，可以在该属性前面加上?。

html`<custom-button ?disabled=${someBoolean}></custom-button>`;

然后Lit将根据表达式是真是假添加属性。请参阅有关布尔属性的文档。

在Lit组件定义中，您可以通过提供类型来指定布尔属性

在TypeScript中：

class CustomButton extends LitElement {
@property({type: Boolean})
disabled = false;
}

在JavaScript:中

class CustomButton extends LitElement {
static properties = {
disabled = {type: Boolean};
}
constructor() {
super();
this.disabled = false;
}
}

使得在组件CCD_ 2内将是基于属性是否存在的布尔值。