e5b307df1b
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.
26 lines
1.2 KiB
JavaScript
26 lines
1.2 KiB
JavaScript
// Tiny DOM-builder helper shared by the dashboard and the per-agent UI —
|
|
// both packages built their own copy independently; this is the merged
|
|
// canonical version (dashboard's, which had the extra `data-` branch;
|
|
// functionally identical to the `class`/`html` handling either package
|
|
// used).
|
|
//
|
|
// `el(tag, attrs, ...children)` creates an element, applying `attrs` as
|
|
// 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).
|
|
// `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 = document.createElement(tag);
|
|
for (const [k, v] of Object.entries(attrs)) {
|
|
if (k === 'class') e.className = v;
|
|
else if (k === 'html') e.innerHTML = v;
|
|
else e.setAttribute(k, v);
|
|
}
|
|
for (const c of children) {
|
|
if (c == null) continue;
|
|
e.append(c.nodeType ? c : document.createTextNode(c));
|
|
}
|
|
return e;
|
|
};
|