@nicolasparada/html-tag

HTML tagged template literal function.

Example Usage

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>
`