Add dev mode warning when static values are detected without using static html tag. #4332
Description
Should this be an RFC?
- This is not a substantial change
Which package is this a feature request for?
Lit Core (lit / lit-html / lit-element / reactive-element)
Description
It's easy to accidentally use the wrong html tagged template literal when reaching for static directives.
E.g.
import { html, render } from 'lit'; // This should be the html imported from 'lit/static-html.js'
import { unsafeStatic } from 'lit/static-html.js';
// Does not throw warning/error, and renders `attribute="[object Object]"`
render(html`<h1 attribute="${unsafeStatic('test')}">test</h1>`, document.body);The above example ends up rendering attribute="[object Object]", when it should throw a dev mode warning.
Alternatives and Workarounds
Correctly use html TTL imported from static when using static values in your template.
E.g.
import { render } from 'lit'; // This should be the html imported from 'lit/static-html.js'
import { html, unsafeStatic } from 'lit/static-html.js';
// Renders correctly.
render(html`<h1 attribute="${unsafeStatic('test')}">test</h1>`, document.body);Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status