duplicate.js

// Import lit-html functions
import {html, render, directive, NodePart, createMarker} from 'lit-html';

// duplicate directive takes a single value, and renders it in the DOM twice
const duplicate = directive((value) => {
  let part1;
  let part2;

  const createAndAppendPart = (containerPart) => {
    // create markers surrounding content managed by the new part
    const container = containerPart.startNode.parentNode;
    const startNode = createMarker();
    container.insertBefore(startNode, containerPart.endNode);
    container.insertBefore(createMarker(), containerPart.endNode);

    // create and insert the new part
    const newPart = new NodePart(containerPart.options);
    newPart.insertAfterNode(startNode);

    return newPart;
  }

  return (containerPart) => {
    if (!(containerPart instanceof NodePart)) {
      throw new Error('duplicate directive can only be used in content bindings');
    }

    if (part1 === undefined) { 
      // create parts
      part1 = createAndAppendPart(containerPart);
      part2 = createAndAppendPart(containerPart);
    }
    part1.setValue(value);
    part1.commit();
    part2.setValue(value);
    part2.commit();
  }
});