Web components utils

elements.js

function createReactive(initialValue, sideEffect) {
  const proxy = new Proxy(
    { value: initialValue },
    {
      set(target, prop, newValue) {
        const outcome = Reflect.set(...arguments);
        if (outcome) sideEffect(newValue);
        return outcome;
      },
      get(target, prop, receiver) {
        return Reflect.get(...arguments);
      },
    }
  );

  return proxy;
}

/**
 * @param {HTMLElement} element
 * @param {string} id
 */
function attachTemplate(element, id) {
  const template = document.getElementById(id);
  element.attachShadow({ mode: 'open' });
  element.shadowRoot.appendChild(template.content.cloneNode(true));
}

/**
 * @param {ShadowRoot} root
 * @param {Array<string>} targets
 * @returns {Record<string, HTMLElement>}
 */
function getTargetElements(root, targets) {
  const elements = {};

  targets.forEach(
    (target) =>
      (elements[target] = root.querySelector(`[data-target="${target}"]`))
  );

  return elements;
}