Ui3

const $ = new Proxy(
  {},
  {
    get(_, n) {
      return (children, attrs) => {
        const _ = document.createElement(n);
        [children]
          .flat()
          .forEach(v => v && _.appendChild(typeof v !== "object" ? document.createTextNode(v) : v));
        Object.entries(attrs || {})?.forEach(([k, v]) => _.setAttribute(k, v));
        return _;
      };
    },
  }
);

const DOM = $.div(
  [
    $.span("first child span"),
    $.span([
      "second child span",
      $.button("button inside second span", { type: "button", id: "nicebutton" }),
    ]),
  ],
  { id: "root" }
);

console.log(DOM);