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

Note the explicit lack of the attribute someValue on the third.


render() {
  const someValue = "a";

  return html`
    <my-el someValue=${someValue}></my-el>

But if someValue was undefined, it would render as <my-el someValue="undefined"></my-el> which I don't want.


The reason I want to do this is because I'd like to have a CSS selector that affects all of them that have [someValue] regardless of what the actual value is, but to not apply that if it isn't there.

P.S., I'm aware of workarounds like using :not([someValue=undefined]) or returning conditional HTML, so please don't reply with those. I'm using one of those right now, but if there is a direct answer to my question, hoping to swap out for that for a little cleaner code. Thanks.

  • Jim
    Jim 回复

    You can simply use ifDefined directive for this. For AttributeParts, it sets the attribute if the someValue is defined and removes the attribute if the someValue is undefined. You can then further modify it using ternary operator to check for falsy values as well:

    import {ifDefined} from 'lit-html/directives/if-defined';
    return html`
       <my-el someValue=${ifDefined(someValue ? someValue : undefined)}></my-el>