How to use lit-html - 10 common examples

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));

success: !this.primary && this.success && !this.warning && !this.danger,
      warning: !this.primary && !this.success && this.warning && !this.danger,
      danger: !this.primary && !this.success && !this.warning && this.danger,
      skeleton: this.skeleton,
      image: this.image != null,
    };

    // simple mode is default when no value or when there are multiple conflicting values
    modes.simple = !modes.primary && !modes.success && !modes.warning && !modes.danger;

    // outlined is not default except in simple mode
    modes.outlined = this.outlined || modes.simple;

    return html`<button class="${classMap(modes)}" type="button">
      <div class="${classMap({">
        ${this.image != null ? html`
          <img alt="" src="${this.image}">
        ` : ''}
        
      </div>
      
      ${this.delay != null ? html`</button>

<div>
		${repeat([], () =&gt; html``)}
	</div>
`;

const classes = {};
html`
	<div>Classy text</div>
`;

const style = {};
html`
	<p>Hello style!</p>
`;

html`
	<img src="${guard([src], () => (Math.random() > 0.5 ?">
	
`;

html`
	<input>
`; /* <input disabled="true"> */
html`
	<input>
`; /* <input disabled="true"> */
html`
	<input>
`; /* <input disabled="false"> */

if (key === 'locale') {
        const fetchLocales = async () => {
          const r = await fetch('/src/demo/locales.json');
          const d: Locale[] = await r.json();
          return d.map(n =&gt; html`<option value="${n.code}">${n.name}</option>`);
        };

        // tslint:disable: max-line-length
        return html`<div class="container__prop">
          <label>
            <span>${key}</span>
            <select value="${value}">${until(fetchLocales(), nothing)}</select>
          </label>
        </div>`;
        // tslint:enable: max-line-length
      }

      return html`<div class="container__prop">
        <label>
          <span>${key}</span>
          <input value="${value}" type="${inputType}">
        </label>
      </div>`;
    });

/* min= */ 0,
          /* max= */ 255,
          /* step= */ 1)}

        ${numericParamTemplate(
          'max-rgba-delta',
          'Max RGBA delta:',
          /* setterFn= */ (val) => el._filters!.maxRGBADelta = val,
          /* value= */ el._filters?.maxRGBADelta,
          /* min= */ 0,
          /* max= */ 255,
          /* step= */ 1)}

        <label for="sort-order">Sort order:</label>
        <select id="sort-order">
          <option value="ascending">Ascending</option>
          <option value="descending">Descending</option>
        </select>

        
        
      

      <div class="buttons">
        <button class="filter action">Apply</button>
        <button class="cancel">Cancel</button>
      </div>

private static _template = (el: FilterDialogSk) => html`
    <dialog class="filter-dialog">
      <div class="content">
        <span class="label">Right-hand traces:</span>
        
        

        ${numericParamTemplate(
          'min-rgba-delta',
          'Min RGBA delta:',
          /* setterFn= */ (val) =&gt; el._filters!.minRGBADelta = val,
          /* value= */ el._filters?.minRGBADelta,
          /* min= */ 0,
          /* max= */ 255,
          /* step= */ 1)}

        ${numericParamTemplate(
          'max-rgba-delta',
          'Max RGBA delta:',
          /* setterFn= */ (val) =&gt; el._filters!.maxRGBADelta = val,</div></dialog>

/* value= */ el._filters?.maxRGBADelta,
          /* min= */ 0,
          /* max= */ 255,
          /* step= */ 1)}

        <label for="sort-order">Sort order:</label>
        <select id="sort-order">
          <option value="ascending">Ascending</option>
          <option value="descending">Descending</option>
        </select>

        
        
      

      <div class="buttons">
        <button class="filter action">Apply</button>
        <button class="cancel">Cancel</button>
      </div>
    `;

private static _template = (el: SearchControlsSk) => html`
    
    

    <div class="digests">
      <span class="legend">Digests:</span>

      ${SearchControlsSk._checkBoxTemplate(
          el,
          /* label= */ 'Positive',
          /* cssClass= */ 'include-positive-digests',
          /* fieldName= */ 'includePositiveDigests')}

      ${SearchControlsSk._checkBoxTemplate(
          el,
          /* label= */ 'Negative',
          /* cssClass= */ 'include-negative-digests',</div>

};

  // Please see the note on the FilterDialogSk's template regarding the live() directive.
  return html`
    <label for="${id}">${label}</label>
    <div id="${id}-numeric-param" class="numeric-param">
      <input step="${step}" max="${max}" min="${min}" id="${id}" type="range">
      <input step="${step}" max="${max}" min="${min}" type="number">
    </div>`;
}

readonly?: boolean;
  required?: boolean;
  validityMessage?: string;
  value?: string;
} = {}) => {
  const inner = !hasContent
    ? (undefined! as TemplateResult)
    : html`
        
      `;
  return !hasContent || !hasForm
    ? inner
    : html`
        <form>${inner}</form>
      `;
};