imkost

<div class="Page">
  <h2 class="Page__title">IT Company</h2>
  <div class="Page__content">We develop apps</div>
</div>

{
  class: 'Page',
  inner: [
    {
      tag: 'h2',

imkost

<div class="Page">
  <h2 class="Page__title">IT Company</h2>
  <div class="Page__content">We develop apps</div>
</div>

imkost

NameEditor.onKeyUp = changeInnerText('nameEditor__name');

imkost

const nameElems = watchClass(id => `nameEditor__name-${id}`);

NameEditor.onKeyUp = (input, id) => {
  nameElems(id, elem => elem.innerText = input.value);
};

imkost

const nameElems = {};

function getNameElems(id) {
  return nameElems[id] || (
    nameElems[id] = document.getElementsByClassName(`nameEditor__name-${id}`)
  );
}

NameEditor.onKeyUp = (input, id) => {
  for (const elem of getNameElems(id)) {

imkost

const Box = () => '<div class="box"></div>';
const boxes = document.getElementsByClassName('box');

document.body.innerHTML = `${Box()}${Box()}${Box()}`;
console.log(boxes.length); // 3

document.body.innerHTML = `${Box()}`;
console.log(boxes.length); // 1

imkost

function NameEditor({ id }) {
  // Add color to distinguish name editors
  const color = {
    0: '#b6e1c1',
    1: '#b7c4ed',
  }[id];

  return `
    <div class="nameEditor" style="background: ${color}">
      ...

imkost

function App({ url }) {
  return `
    ...
    ${NameEditor({ id: 0 })}
    ${NameEditor({ id: 1 })}
    ${NameEditor({ id: 2 })}
    ...
  `
}

imkost

function Box({ text }) {
  return `
    <div class="box" onClick="Box.onClick()">
      ${text}
    </div>
  `;
}

Box.onClick = () => {
  alert('box was clicked');

imkost

<div>
  Hello, <span id="nameEditor__name"></span>
</div>