vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: hive-btn — drop the is= customized-built-in, use an autonomous element instead

Browse source 
Per review: don't use is=, it reads as a hack (and it is one — is=-upgraded
built-ins can never host a shadow root, which is what caused the crash this PR
fixes in the first place). <hive-btn> is now a normal autonomous custom element
wrapping a real <button> inside its own shadow root, so it gets its shadow
encapsulation back (matching hive-dialog/hive-toast) instead of the document-
level stylesheet workaround from the previous commit.

delegatesFocus: true on the shadow root means .focus() on the host (what
modal.js calls for autofocus) reaches the inner button directly. The inner
button's native click is a composed event, so host-level click listeners
(what modal.js/themedPrompt already use) keep working unchanged.

modal.js: el('button', { is: 'hive-btn', ... }) -> el('hive-btn', { ... }) at
the one call site. dom.js: removed the is= special case from el() entirely —
it existed only to support this one now-gone usage. Build clean.
This commit is contained in:
iris 2026-07-29 23:17:19 +02:00
commit e5b307df1b
4 changed files with 84 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/packages/shared/src/dom.js
View file

@ -5,18 +5,15 @@
// used).
//
// `el(tag, attrs, ...children)` creates an element, applying `attrs` as
// either the `class`/`html`/`is` special cases or plain attributes, and
// either the `class`/`html` special cases or plain attributes, and
// appending `children` (strings become text nodes, `null`/`undefined`
// entries are skipped so callers can inline conditional children).
// `is: 'custom-name'` creates a customized built-in element (e.g.
// `el('button', { is: 'hive-btn' }, 'label')` → `<button is="hive-btn">`)
// — passed to `document.createElement` itself, since a customized
// built-in has to be created with its `is` option up front, not upgraded
// after the fact via `setAttribute`.
// `tag` can be any custom element's tag name too (e.g. `el('hive-btn',
// { variant: 'danger' }, 'label')`) — `document.createElement` upgrades
// it automatically if the tag is already registered.
export const el = (tag, attrs = {}, ...children) => {
const e = attrs.is ? document.createElement(tag, { is: attrs.is }) : document.createElement(tag);
const e = document.createElement(tag);
for (const [k, v] of Object.entries(attrs)) {
if (k === 'is') continue;
if (k === 'class') e.className = v;
else if (k === 'html') e.innerHTML = v;
else e.setAttribute(k, v);