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`
   <my-el someValue=${ifDefined(someValue ? someValue : undefined)}></my-el>
`;