https://github.com/nicolasparada/js-html-tag

HTML tagged template literal function
https://github.com/nicolasparada/js-html-tag

npm-package tagged-template-literals

Last synced: about 1 month ago
JSON representation

HTML tagged template literal function

• Host: GitHub
• URL: https://github.com/nicolasparada/js-html-tag
• Owner: nicolasparada
• License: isc
• Created: 2018-01-23T20:06:43.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2023-03-23T00:55:48.000Z (over 1 year ago)
• Last Synced: 2024-05-23T08:06:43.125Z (6 months ago)
• Topics: npm-package, tagged-template-literals
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [`@nicolasparada/html-tag`](https://www.npmjs.com/package/@nicolasparada/html-tag)

HTML tagged template literal function.

## Example Usage

```js

import html from 'https://unpkg.com/@nicolasparada/html-tag'

const template = html`

    :host { display: block }

    Hello, world!

`

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`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement). It's meant to give just [syntax highlighting](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html).

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:

```js

html`

    


        ${['foo', 'bar'].map(item => html`

            
${item}

        `)}

    

`

```


Do:

```js

html`

    


        ${['foo', 'bar'].map(item => {

            const html = String.raw

            return html`

                
${item}

            `

        })}

    

`

```