LitElement - 如果值为 false，则不要添加属性

Question

有没有办法基本上呈现这三种可能性：

<my-el someValue="a"></my-el>

<my-el someValue="b"></my-el>

<my-el></my-el> 

请注意第三个明显缺少该属性someValue。

要正常渲染，我会这样做：

render() {

  const someValue = "a";

  return html`

    <my-el someValue=${someValue}></my-el>

  `;

}

但如果someValue是undefined，它会呈现为<my-el someValue="undefined"></my-el>我不想要的。

有没有办法为虚假获得类似布尔的行为，但显示真实值的价值？我阅读了文档，但希望我遗漏了一些东西。

我想这样做的原因是因为我想要一个 CSS 选择器，它会影响所有这些选择器，[someValue]而不管实际值是什么，但如果它不存在则不应用它。

PS，我知道使用:not([someValue=undefined])或返回条件 HTML 之类的解决方法，所以请不要回复这些。我现在正在使用其中的一个，但是如果我的问题有直接的答案，希望换掉它以获得更简洁的代码。谢谢。

Answer 1

您可以简单地ifDefined为此使用指令。对于 AttributeParts，如果 已定义，则设置属性，如果someValue未定义，则删除属性someValue。然后，您可以使用三元运算符进一步修改它以检查虚假值：import {ifDefined} from 'lit-html/directives/if-defined';return html`&nbsp; &nbsp;<my-el someValue=${ifDefined(someValue ? someValue : undefined)}></my-el>`;