Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example workaround for conditional attributes when using unsafeStatic #1177

Open
jimsimon opened this issue Aug 23, 2023 · 3 comments
Open

Comments

@jimsimon
Copy link

Trying to use ifDefined inside of unsafeStatic causes a type error from TS and a runtime error from JS: “Cannot convert a Symbol value to a string”. This wasn't immediately apparent to us and, in our case, our editors (Webstorm and VSCode) did not flag the type conversion error from TS at all when the invalid usage is wrapped inside of a <template> element.

The workaround is to use a conditional to determine whether to render the attribute:

import { html, unsafeStatic } from 'lit/static-html';

@property()
type?: string;

render() {
  return html`
    ${unsafeStatic(`
        <input ${this.type ? 'type="${this.type}"' : ''}>some text</input>
    `)}
  `
}
@justinfagnani
Copy link
Contributor

We should fix the original problem: you should be able to use ifDefined in a static template.

@augustjk
Copy link
Member

Wouldn't that require the static unwrapper to lookback and remove the attribute and whole value on nothing?

@justinfagnani
Copy link
Contributor

Ohhh, right. Sorry I thought it was purely a type issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

No branches or pull requests

3 participants