Conditionally rendering nothing on an aria attribute produces an error when it shouldn't
mark-dropbear opened this issue · comments
The code below is an example taken from an element class that demonstrates a scenario that triggers the following error on the aria-current
attribute for the link element.
Type '"page" | Symbol(undefined)' is not assignable to '"page" | "step" | "location" | "date" | "time" | "true" | "false"'lit-plugin(no-incompatible-type-binding)(2304)
#renderLinks(): TemplateResult {
return html`
<ul>
${this.#menuItems.map((link) => {
return html`
<li>
<a href="${link.href.pathname}" aria-current="${this.#isCurrentPage(link.href) || nothing }">${link.text}</a>
</li>
`})
}
</ul>
`;
}
#isCurrentPage(url: URL){
if(url.pathname === window.location.pathname){
return 'page';
} else {
return undefined;
}
}
This should not trigger an error as per these guidelines: https://lit.dev/docs/templates/conditionals/#conditionally-rendering-nothing
Possible dup of #251