Support for Lit

[JosefJezek]

Clear and concise description of the problem

Lit templates are written using JavaScript template literals tagged with the html tag. The contents of the literal are mostly plain, declarative, HTML:

static styles = css`
  :host {
    color: blue;
  }
`;

render() {
  return html`<p>Hello, ${this.name}!</p>`;
}

https://lit.dev/docs/components/overview/

Suggested solution

I don't know any solution.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• If this feature request is accepted, I am willing to submit a PR to fix this issue

[JosefJezek]

@antfu Thank you 👍🏻

[JosefJezek]

@antfu please add support for these tags

svg

const rect = svg`<rect width="10" height="10"></rect>`;
const myImage = html`
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    ${rect}
  </svg>`;

https://lit.dev/docs/api/templates/#svg

math - MathML

const num = math`<mn>1</mn>`;

const eq = html`
   <math>
     ${num}
   </math>`;

lit/lit#4637

[antfu]

Feel free to send PRs and help out. I don't use Lit myself.

[JosefJezek]

pls reopen issue

[antfu]

No. The original issue is resolved. You can't just keep asking more. Open source is voluntary, help out to move things forward.