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>。

有没有办法让 falsy 获得类似布尔值的行为，但显示 truthy 值的值？我阅读了文档，但希望我遗漏了什么。

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

P.S.，我知道使用 :not([someValue=undefined]) 或返回条件 HTML 等变通方法，所以请不要回复这些。我现在正在使用其中一个，但如果我的问题有直接答案，希望能换成更简洁的代码。谢谢。

Answer 1

为此您可以简单地使用 ifDefined 指令。对于 AttributeParts，如果定义了 someValue 则设置属性，如果未定义 someValue 则移除属性。然后您可以使用三元运算符进一步修改它以检查 falsy 值：

import {ifDefined} from 'lit-html/directives/if-defined';

return html`
   <my-el someValue=${ifDefined(someValue ? someValue : undefined)}></my-el>
`;

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

LitElement - Don't add attribute if value is false

javascript

css

lit-element