HTML tagged template literal function.
import html from 'https://unpkg.com/@nicolasparada/html-tag'
const template = html`
<style>:host { display: block }</style>
Hello, <slot>world</slot>!
`
class HelloWorld extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
}
connectedCallback() {
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
}
customElements.define('hello-world', HelloWorld)
This function will create an HTMLTemplateElement
. It's meant to give just syntax highlighting.
If you try to use it inside itself again, it will pay the cost of creating a template again and getting its innerHTML
. So, use a normal string or something like String.raw
.
Instead of:
html`
<ul>
${['foo', 'bar'].map(item => html`
<li>${item}</li>
`)}
</ul>
`
Do:
html`
<ul>
${['foo', 'bar'].map(item => {
const html = String.raw
return html`
<li>${item}</li>
`
})}
</ul>
`