Nocturnal Pumpkin Maelstrom

    @nicolasparada/html-tag

    3.0.0 • Public • Published

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

    Install

    npm i @nicolasparada/html-tag

    DownloadsWeekly Downloads

    1

    Version

    3.0.0

    License

    ISC

    Unpacked Size

    3.47 kB

    Total Files

    4

    Last publish

    Collaborators

    • nicolasparada