🎉 Making Custom WebComponents slightly easier https://squint-cljs.github.io/squint/?src=KGRlZmNsYXNzIFdlbGNvbWVCYW5uZXIKICAoZXh0ZW5kcyBIVE1MRWxlbWVudCkKICAKICAoXjpzdGF0aWMgZmllbGQgb2JzZXJ2ZWRBdHRyaWJ1dGVzIFsibmFtZSJdKQogIChmaWVsZCAtbmFtZSkKICAKICAoY29uc3RydWN0b3IgW19dIChzdXBlcikpCiAgCiAgT2JqZWN0CiAgKGNvbm5lY3RlZENhbGxiYWNrIFt0aGlzXSAodGhpcy5yZW5kZXIpKQogIAogIChhdHRyaWJ1dGVDaGFuZ2VkQ2FsbGJhY2sgW3RoaXMgYXR0ci1uYW1lIG9sZC12YWx1ZSBuZXctdmFsdWVdCiAgICAod2hlbiAoYW5kICg9ICJuYW1lIiBhdHRyLW5hbWUpIChub3Q9IG9sZC12YWx1ZSBuZXctdmFsdWUpKQogICAgICAoc2V0ISAtbmFtZSBuZXctdmFsdWUpCiAgICAgICh0aGlzLnJlbmRlcikpKQogIAogIChyZW5kZXIgW3RoaXNdCiAgICAoc2V0ISAoLi1pbm5lckhUTUwgdGhpcykKICAgICAgI2h0bWwgWzpwIChzdHIgIkhlbGxvIiAod2hlbiAtbmFtZSAoc3RyICIsICIgLW5hbWUpKSldKSkpCgood2hlbi1ub3QgKGpzL3dpbmRvdy5jdXN0b21FbGVtZW50cy5nZXQgIndlbGNvbWUtYmFubmVyIikKICAoanMvd2luZG93LmN1c3RvbUVsZW1lbnRzLmRlZmluZSAid2VsY29tZS1iYW5uZXIiIFdlbGNvbWVCYW5uZXIpKQoKKGRlZiBhcHAgKG9yIChqcy9kb2N1bWVudC5xdWVyeVNlbGVjdG9yICIjYXBwIikKICAgICAgICAgICAoZG90byAoanMvZG9jdW1lbnQuY3JlYXRlRWxlbWVudCAiZGl2IikKICAgICAgICAgICAgIChzZXQhIC1pZCAiYXBwIikKICAgICAgICAgICAgIChqcy9kb2N1bWVudC5ib2R5LnByZXBlbmQpKSkpCgooc2V0ISAoLi1pbm5lckhUTUwgYXBwKQogICNodG1sIFs6ZGl2CiAgICAgICAgIFs6d2VsY29tZS1iYW5uZXJdCiAgICAgICAgIFs6d2VsY29tZS1iYW5uZXIgezpuYW1lICJTcXVpbnQifV1dKQ%3D%3D

nice!! btw ["name"] could also be written as [:name] for extra fanciness :)

when I do a console.log in the connectedCallback I don't see anything

I tried to make an example with an updating counter + button: https://squint-cljs.github.io/squint/?src=KGRlZmNsYXNzIFdlbGNvbWVCYW5uZXIKICAoZXh0ZW5kcyBIVE1MRWxlbWVudCkKICAKICAoXjpzdGF0aWMgZmllbGQgb2JzZXJ2ZWRBdHRyaWJ1dGVzIFs6bmFtZV0pCiAgKGZpZWxkIC1uYW1lICJkZWZhdWx0LW5hbWUiKQogIChmaWVsZCAtY291bnQgMCkKICAKICAoY29uc3RydWN0b3IgW19dIChzdXBlcikpCiAgCiAgT2JqZWN0CiAgKGNvbm5lY3RlZENhbGxiYWNrIFt0aGlzXQogICAgKGpzL2NvbnNvbGUubG9nICJ0aGlzIiB0aGlzKQogICAgKC5hZGRFdmVudExpc3RlbmVyIHRoaXMgImNsaWNrIiB0aGlzLmhhbmRsZUNsaWNrKQogICAgI18odGhpcy5yZW5kZXIpKQogIAogIChhdHRyaWJ1dGVDaGFuZ2VkQ2FsbGJhY2sgW3RoaXMgYXR0ci1uYW1lIG9sZC12YWx1ZSBuZXctdmFsdWVdCiAgICAod2hlbiAoYW5kICg9ICJuYW1lIiBhdHRyLW5hbWUpIChub3Q9IG9sZC12YWx1ZSBuZXctdmFsdWUpKQogICAgICAoc2V0ISAtbmFtZSBuZXctdmFsdWUpCiAgICAgICh0aGlzLnJlbmRlcikpKQogIAogIChoYW5kbGVDbGljayBbdGhpcyBlXQogICAgKHNldCEgLWNvdW50IChpbmMgLWNvdW50KSkKICAgICgucmVuZGVyIHRoaXMpKQoKICAoY29ubmVjdGVkQ2FsbGJhY2sgW3RoaXNdCiAgICAoLnJlbmRlciB0aGlzKSkKCiAgKGRpc2Nvbm5lY3RlZENhbGxiYWNrIFt0aGlzXQogICAgKC5yZW1vdmVFdmVudExpc3RlbmVyIHRoaXMgImNsaWNrIiB0aGlzLmhhbmRsZUNsaWNrKSkKICAKICAocmVuZGVyIFt0aGlzXQogICAgKHNldCEgKC4taW5uZXJIVE1MIHRoaXMpCiAgICAgICNodG1sIFs6ZGl2IFs6cCAoc3RyICJIZWxsbyIgKHdoZW4gLW5hbWUgKHN0ciAiLCAiIC1uYW1lKSkpICIgIiAtY291bnQgXQogICAgICAgICAgICAgWzpidXR0b24gezpjbGFzcyAiYnRuIn0gIkNsaWNrIG1lIl1dKSkpCgood2hlbi1ub3QgKGpzL3dpbmRvdy5jdXN0b21FbGVtZW50cy5nZXQgIndlbGNvbWUtYmFubmVyIikKICAoanMvd2luZG93LmN1c3RvbUVsZW1lbnRzLmRlZmluZSAid2VsY29tZS1iYW5uZXIiIFdlbGNvbWVCYW5uZXIpKQoKKGRlZiBhcHAgKG9yIChqcy9kb2N1bWVudC5xdWVyeVNlbGVjdG9yICIjYXBwIikKICAgICAgICAgICAoZG90byAoanMvZG9jdW1lbnQuY3JlYXRlRWxlbWVudCAiZGl2IikKICAgICAgICAgICAgIChzZXQhIC1pZCAiYXBwIikKICAgICAgICAgICAgIChqcy9kb2N1bWVudC5ib2R5LnByZXBlbmQpKSkpCgooc2V0ISAoLi1pbm5lckhUTUwgYXBwKQogICNodG1sIFs6ZGl2CiAgICAgICAgIFs6d2VsY29tZS1iYW5uZXJdCiAgICAgICAgIFs6d2VsY29tZS1iYW5uZXIgezpuYW1lICJTcXVpbnQifV1dKQ%3D%3D

oh I see, the example had two connectedCallbacks

ok, this works: https://squint-cljs.github.io/squint/?src=KGRlZmNsYXNzIFdlbGNvbWVCYW5uZXIKICAoZXh0ZW5kcyBIVE1MRWxlbWVudCkKICAKICAoXjpzdGF0aWMgZmllbGQgb2JzZXJ2ZWRBdHRyaWJ1dGVzIFs6bmFtZV0pCiAgKGZpZWxkIC1uYW1lICJkZWZhdWx0LW5hbWUiKQogIChmaWVsZCAtY291bnQgMCkKICAKICAoY29uc3RydWN0b3IgW19dIChzdXBlcikpCiAgCiAgT2JqZWN0CiAgKGNvbm5lY3RlZENhbGxiYWNrIFt0aGlzXQogICAgKHRoaXMucmVuZGVyKSkKICAKICAoYXR0cmlidXRlQ2hhbmdlZENhbGxiYWNrIFt0aGlzIGF0dHItbmFtZSBvbGQtdmFsdWUgbmV3LXZhbHVlXQogICAgKHdoZW4gKGFuZCAoPSA6bmFtZSBhdHRyLW5hbWUpIChub3Q9IG9sZC12YWx1ZSBuZXctdmFsdWUpKQogICAgICAoc2V0ISAtbmFtZSBuZXctdmFsdWUpCiAgICAgICh0aGlzLnJlbmRlcikpKQogIAogIChoYW5kbGVDbGljayBbdGhpcyBlXQogICAgKHNldCEgLWNvdW50IChpbmMgLWNvdW50KSkKICAgICgucmVuZGVyIHRoaXMpKQoKICAoZGlzY29ubmVjdGVkQ2FsbGJhY2sgW3RoaXNdCiAgICAoLnJlbW92ZUV2ZW50TGlzdGVuZXIgdGhpcyAiY2xpY2siIHRoaXMuaGFuZGxlQ2xpY2spKQogIAogIChyZW5kZXIgW3RoaXNdCiAgICAoc2V0ISAoLi1pbm5lckhUTUwgdGhpcykKICAgICAgI2h0bWwgWzpkaXYgWzpwIChzdHIgIkhlbGxvIiAod2hlbiAtbmFtZSAoc3RyICIsICIgLW5hbWUpKSkgIiAiIC1jb3VudCBdCiAgICAgICAgICAgICBbOmJ1dHRvbiB7OmNsYXNzICJidG4ifSAiQ2xpY2sgbWUiXV0pCiAgICAoLmFkZEV2ZW50TGlzdGVuZXIKICAgICAgKHRoaXMucXVlcnlTZWxlY3RvciAiLmJ0biIpCiAgICAgICJjbGljayIgIyh0aGlzLmhhbmRsZUNsaWNrKSkpKQoKKHdoZW4tbm90IChqcy93aW5kb3cuY3VzdG9tRWxlbWVudHMuZ2V0ICJ3ZWxjb21lLWJhbm5lciIpCiAgKGpzL3dpbmRvdy5jdXN0b21FbGVtZW50cy5kZWZpbmUgIndlbGNvbWUtYmFubmVyIiBXZWxjb21lQmFubmVyKSkKCihkZWYgYXBwIChvciAoanMvZG9jdW1lbnQucXVlcnlTZWxlY3RvciAiI2FwcCIpCiAgICAgICAgICAgKGRvdG8gKGpzL2RvY3VtZW50LmNyZWF0ZUVsZW1lbnQgImRpdiIpCiAgICAgICAgICAgICAoc2V0ISAtaWQgImFwcCIpCiAgICAgICAgICAgICAoanMvZG9jdW1lbnQuYm9keS5wcmVwZW5kKSkpKQoKKHNldCEgKC4taW5uZXJIVE1MIGFwcCkKICAjaHRtbCBbOmRpdgogICAgICAgICBbOndlbGNvbWUtYmFubmVyXQogICAgICAgICBbOndlbGNvbWUtYmFubmVyIHs6bmFtZSAiU3F1aW50In1dXSk%3D what I find a bit awkward is the querySelectorAll for detecting the button + having to wrap the handleClick in a lambda (else this refers to the wrong thing) if you have any tips to do this better, welcome!

One other way to do that would be not to overwrite the entire dom tree for each render and just update the values https://squint-cljs.github.io/squint/?src=KGRlZmNsYXNzIFdlbGNvbWVCYW5uZXIKICAoZXh0ZW5kcyBIVE1MRWxlbWVudCkKICAKICAoXjpzdGF0aWMgZmllbGQgb2JzZXJ2ZWRBdHRyaWJ1dGVzIFs6bmFtZV0pCiAgKGZpZWxkIC1uYW1lICJkZWZhdWx0LW5hbWUiKQogIChmaWVsZCAtY291bnQgMCkKICAKICAoZmllbGQgLWVsLW5hbWUpCiAgKGZpZWxkIC1lbC1jbnQpCiAgKGZpZWxkIC1lbC1idXR0b24pCiAgCiAgKGNvbnN0cnVjdG9yIFt0aGlzXQogICAgKHN1cGVyKQogICAgKHNldCEgKC4taW5uZXJIVE1MIHRoaXMpCiAgICAgICNodG1sIFs6ZGl2CiAgICAgICAgICAgICBbOnAgIkhlbGxvIiBbOnNwYW4gezpjbGFzcyAibmFtZSJ9XSBbOnNwYW4gezpjbGFzcyAiY250In1dXQogICAgICAgICAgICAgWzpidXR0b24gezpjbGFzcyAiYnRuIn0gIkNsaWNrIG1lIl1dKQogICAgKHNldCEgLWVsLW5hbWUgKHRoaXMucXVlcnlTZWxlY3RvciAiLm5hbWUiKSkKICAgIChzZXQhIC1lbC1jbnQgKHRoaXMucXVlcnlTZWxlY3RvciAiLmNudCIpKQogICAgKHNldCEgLWVsLWJ1dHRvbiAodGhpcy5xdWVyeVNlbGVjdG9yICIuYnRuIikpKQogIAogIE9iamVjdAogIChjb25uZWN0ZWRDYWxsYmFjayBbdGhpc10KICAgICguYWRkRXZlbnRMaXN0ZW5lciAtZWwtYnV0dG9uICJjbGljayIgIyh0aGlzLmhhbmRsZUNsaWNrKSkKICAgICh0aGlzLnJlbmRlcikpCiAgCiAgKGF0dHJpYnV0ZUNoYW5nZWRDYWxsYmFjayBbdGhpcyBhdHRyLW5hbWUgb2xkLXZhbHVlIG5ldy12YWx1ZV0KICAgICh3aGVuIChhbmQgKD0gOm5hbWUgYXR0ci1uYW1lKSAobm90PSBvbGQtdmFsdWUgbmV3LXZhbHVlKSkKICAgICAgKHNldCEgLW5hbWUgbmV3LXZhbHVlKQogICAgICAodGhpcy5yZW5kZXIpKSkKICAKICAoaGFuZGxlQ2xpY2sgW3RoaXMgZV0KICAgIChzZXQhIC1jb3VudCAoaW5jIC1jb3VudCkpCiAgICAoLnJlbmRlciB0aGlzKSkKCiAgKGRpc2Nvbm5lY3RlZENhbGxiYWNrIFt0aGlzXQogICAgKC5yZW1vdmVFdmVudExpc3RlbmVyIC1lbC1idXR0b24gImNsaWNrIiB0aGlzLmhhbmRsZUNsaWNrKSkKICAKICAocmVuZGVyIFt0aGlzXQogICAgKHdoZW4gLW5hbWUKICAgICAgKHNldCEgKC4tdGV4dENvbnRlbnQgLWVsLW5hbWUpIChzdHIgIiwgIiAtbmFtZSkpKQogICAgKHNldCEgKC4tdGV4dENvbnRlbnQgLWVsLWNudCkgKHN0ciAiICIgLWNvdW50KSkpKQoKKHdoZW4tbm90IChqcy93aW5kb3cuY3VzdG9tRWxlbWVudHMuZ2V0ICJ3ZWxjb21lLWJhbm5lciIpCiAgKGpzL3dpbmRvdy5jdXN0b21FbGVtZW50cy5kZWZpbmUgIndlbGNvbWUtYmFubmVyIiBXZWxjb21lQmFubmVyKSkKCihkZWYgYXBwIChvciAoanMvZG9jdW1lbnQucXVlcnlTZWxlY3RvciAiI2FwcCIpCiAgICAgICAgICAgKGRvdG8gKGpzL2RvY3VtZW50LmNyZWF0ZUVsZW1lbnQgImRpdiIpCiAgICAgICAgICAgICAoc2V0ISAtaWQgImFwcCIpCiAgICAgICAgICAgICAoanMvZG9jdW1lbnQuYm9keS5wcmVwZW5kKSkpKQoKKHNldCEgKC4taW5uZXJIVE1MIGFwcCkKICAjaHRtbCBbOmRpdgogICAgICAgICBbOndlbGNvbWUtYmFubmVyXQogICAgICAgICBbOndlbGNvbWUtYmFubmVyIHs6bmFtZSAiU3F1aW50In1dXSk%3D

I would bet that is pretty great performance-wise too