function createDebugDom() {
  const descendants = node => [node, ...node.children.flatMap(descendants)];
  const document = { activeElement: null };
  function element(tag) {
    return {
      tag, children: [], attributes: {}, listeners: {}, scrollTop: 0, hidden: false, text: "",
      set textContent(value) { this.text = value; this.children = []; },
      get textContent() { return this.text; },
      append(...nodes) { this.children.push(...nodes); },
      setAttribute(key, value) { this.attributes[key] = value; },
      getAttribute(key) { return this.attributes[key]; },
      addEventListener(name, listener) { this.listeners[name] = listener; },
      focus() { document.activeElement = this; },
      querySelectorAll(selector) {
        return descendants(this).filter(node => selector.startsWith(".")
          ? (node.className || "").split(" ").includes(selector.slice(1))
          : node.tag === "details" && node.getAttribute("data-request-id") && (!selector.includes("[open]") || node.open));
      }
    };
  }
  const panel = element("aside");
  const modal = element("main");
  modal.append(panel);
  Object.assign(document, { getElementById: id => id === "opportunities-extension-modal" ? modal : panel, createElement: element, createElementNS: (_, tag) => element(tag) });
  return { document, panel, modal, descendants };
}

module.exports = { createDebugDom };