What is this syntax html`...`?

Question

Here's a snippet from polymer docs

import { LitElement, html } from 'lit-element'

class Component extends LitElement {
  render () {
    return html`<p>A paragraph</p>`
  }
}

customElements.define('app-layout', Component)

I'm confused with this line return html`<p>A paragraph</p>`

typeof html gives me function, so it must be some sort of function infocation. html('<p>A paragraph</p>') throws an error Uncaught (in promise) TypeError: t.strings.join is not a function

It's a [tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) — Pointy, Jul 30 '19 at 16:19

score 1 · Accepted Answer · answered Jul 30 '19 at 16:24

According to Polymer3 official documentation

The template getter must return an instance of HTMLTemplateElement. Use the html helper function to generate an HTMLTemplateElement instance from a JavaScript template literal. (You can import the html helper from the polymer-element.js module.)

Here html is a helper function. The Polymer.html helper introduced in Polymer 2.4 makes template extension a little simpler.

What is this syntax html`...`?

1 Answers1