Basic Content Output Web Component Starter

const content = [
	`The quick VAR1 VAR2
jumped over the VAR3 VAR4`,
	`brown|fox|lazy|dog`,
];

const style = document.createElement("style");
style.innerHTML = `
* {
margin: 0;
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
textarea {
  width: 16rem;
  height: 10rem;
}
`;

const template = `
<h3>Multiline Replacer</h3>
<div class="wrapper">
  <div>
    <div>
      <p>Input</p>
    <textarea class="template"></textarea>
    </div>
    <div>
      <p>Variables</p>
      <textarea class="input"></textarea>
    </div>
  </div>
  <div>
    <p>Output</p>
    <textarea class="output"></textarea>
  </div>
</div>
`;

class LineReplacer extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: "open" });
	}

	connectedCallback() {
		this.wrapper = this.wrapper().content.cloneNode(true);
		this.shadowRoot.appendChild(this.wrapper);
		this.shadowRoot.appendChild(style);
		this.template = this.shadowRoot.querySelector(".template");
		this.input = this.shadowRoot.querySelector(".input");
		this.output = this.shadowRoot.querySelector(".output");
		this.loadExample();
	}

	loadExample() {
		this.template.innerHTML = `The quick VAR1 VAR2\njumped over the VAR3 VAR4`;
		this.content.innerHTML = `brown|fox|lazy|dog\n`;
	}

	processInput() {}

	wrapper() {
		const wrapper = this.ownerDocument.createElement("template");
		wrapper.innerHTML = template.trim();
		return wrapper;
	}
}

customElements.define("line-replacer", LineReplacer);