To help you get started, we've collected the most common ways that lit-html is being used within popular public projects.

google / skia-buildbot / shaders / modules / shaders-app-sk / shaders-app-sk.ts View on Github

private static displayShaderTreeImpl = (ele: ShadersAppSk, parentNode: ShaderNode | null, node: ShaderNode, depth: number = 0, name: string = '/', childIndex: number = 0): TemplateResult[] => {
    let ret: TemplateResult[] = [];
    // Prepend some fixed width spaces based on the depth so we get a nested
    // directory type of layout. See https://en.wikipedia.org/wiki/Figure_space.
    const prefix = new Array(depth).fill('  ').join('');
    ret.push(html`
      <p class="childShader"> ele.childShaderClick(node)}&gt;
          <span>
            ${unsafeHTML(prefix)}
            <span class="linkish">${name}</span>
            ${(ele.rootShaderNode!.children.length &gt; 0 &amp;&amp; ele.currentNode === node) ? '*' : ''}
          </span>
          <span>
            ${ShadersAppSk.deleteButton(ele, parentNode, node, childIndex)}
            ${ShadersAppSk.editButton(ele, parentNode, node, childIndex)}
            <button title="Append a new child shader." class="addButton"> ele.appendChildShader(e, node)}&gt;
                
            </button>
          </span>
      </p>`);
    node.children.forEach((childNode, index) =&gt; {
      ret = ret.concat(ShadersAppSk.displayShaderTreeImpl(ele, node, childNode, depth + 1, node.getChildShaderUniformName(index), index));

View more ways to use lit-html

lit-html 2.0

Efficient, Expressive, Extensible HTML templates in JavaScript

lit-html is the template system that powers the Lit library for building fast web components. When using lit-html to develop web components, most users should import lit-html via the lit package rather than installing and importing from lit-html directly.

About this release

This is a pre-release of Lit 3.0, the next major version of Lit.

Lit 3.0 has very few breaking changes from Lit 2.0:

• Drops support for IE11
• Published as ES2021
• Removes a couple of deprecated Lit 1.x APIs

Lit 3.0 should require no changes to upgrade from Lit 2.0 for the vast majority of users. Once the full release is published, most apps and libraries will be able to extend their npm version ranges to include both 2.x and 3.x, like "^2.7.0 || ^3.0.0".

Lit 2.x and 3.0 are interoperable: templates, base classes, directives, decorators, etc., from one version of Lit will work with those from another.

Please file any issues you find on our issue tracker.

Documentation

Full documentation is available at lit.dev.

Overview

lit-html lets you write HTML templates in JavaScript with template literals.

lit-html templates are plain JavaScript and combine the familiarity of writing HTML with the power of JavaScript. lit-html takes care of efficiently rendering templates to DOM, including efficiently updating the DOM with new values.

import {html, render} from 'lit-html';

// This is a lit-html template function. It returns a lit-html template.
const helloTemplate = (name) =&gt; html`<div>Hello ${name}!</div>`;

// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body);

// This updates to <div>Hello Kevin!</div>, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);

lit-html provides two main exports:

• html: A JavaScript template tag used to produce a TemplateResult, which is a container for a template, and the values that should populate the template.
• render(): A function that renders a TemplateResult to a DOM container, such as an element or shadow root.

Installation

$ npm install lit-html

Or use from lit:

$ npm install lit

Contributing

Please see CONTRIBUTING.md.