Is there a way to display these three options differently:
<my-el someValue="a"></my-el>
<my-el someValue="b"></my-el>
<my-el></my-el>
Notice the absence of the attribute someValue on the third element.
To achieve this normally, I usually do:
render() {
const someValue = "a";
return html`
<my-el someValue=${someValue}></my-el>
`;
}
However, if someValue is undefined, the rendering would be
<my-el someValue="undefined"></my-el>Is there a way to have an approach similar to booleans for falsy values but displaying the value for truthy ones? I have looked at the documentation, but I might be overlooking something.
I wish to implement this in order to have a CSS selector that affects all elements with [someValue], no matter what the actual value is, but excludes those without it.
P.S., I am familiar with solutions like using :not([someValue=undefined]) or returning conditional HTML. Please refrain from suggesting those. While I currently use one of them, I am looking for a direct solution to my question in hopes of replacing it with cleaner code. Thank you.