On this page:

• Define a template
• Specify the render root

Define a template

To define a template for a LitElement component, write a render function for your element class:

class MyElement extends LitElement {
  render(){
    return html`<p>template content</p>`;
  }
}

• Write your template in HTML inside a JavaScript template literal by enclosing the raw HTML in back-ticks (``).

• Tag your template literal with the html helper function, so that render returns a lit-html TemplateResult.

Example

{% include projects/docs/templates/define/my-element.js %}

{% include project.html folder="docs/templates/define" openFile="my-element.js" %}

You can use JavaScript expressions to add properties, loops, and conditionals, compose templates from other templates, and bind data to child elements.

Many text editors can highlight HTML syntax inside JavaScript template literals. See the section on HTML syntax highlighting in the Tools documentation.

Specify the render root

The node into which your component's template will render is called its render root.

By default, LitElement creates an open shadowRoot and renders inside it, producing the following DOM structure:

<my-element>
  #shadow-root
    <p>child 1</p>
    <p>child 2</p>

To customize a component's render root, implement createRenderRoot and return the node you want the template to render into.

For example, to render the template into the main DOM tree as your element's light DOM:

<my-element>
  <p>child 1</p>
  <p>child 2</p>

Implement createRenderRoot and return this:

class LightDom extends LitElement {
  render() {
    return html`
      <p>This template renders in light DOM.</p>
    `;
  }
  createRenderRoot() {
  /**
   * Render template in light DOM. Note that shadow DOM features like 
   * encapsulated CSS are unavailable.
   */
    return this;
  }
}

{% include project.html folder="docs/templates/renderroot" openFile="my-element.js" %}