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

21
frontend/packages/shared/src/modal.js
View file

@ -4,16 +4,13 @@
// actions and prompts match each page's chrome instead of a jarring OS
// dialog.
//
// Implemented as two shadow-DOM custom elements (`<hive-dialog>`,
// `<hive-toast>`) — real per-component style encapsulation, CSS in real
// `.css` files imported as raw text (see each component's own header
// comment for the shadow-DOM-vs-light-DOM tradeoffs) — plus `<hive-btn>`
// (hive-btn.js) for the dialog's own buttons, which is NOT shadow-DOM
// encapsulated: a customized built-in (`<button is="hive-btn">`) can't
// host a shadow root at all, so it styles itself via a document-level
// stylesheet instead (see hive-btn.js's header for why). Other `.btn`
// consumers across the app stay on the light-DOM `.btn` class for now —
// migrating them is a separate follow-up.
// Implemented as three shadow-DOM custom elements (`<hive-dialog>`,
// `<hive-toast>`, and `<hive-btn>` for the dialog's own buttons) — real
// per-component style encapsulation, CSS in real `.css` files imported
// as raw text (see each component's own header comment for the design
// rationale). Other `.btn` consumers across the app stay on the
// light-DOM `.btn` class for now — migrating them is a separate
// follow-up.
//
// `openDialog` is the general primitive (any title/message/content + a row of
// buttons); `themedConfirm` is a thin cancel/confirm wrapper with optional
@ -79,8 +76,8 @@ class HiveDialog extends HTMLElement {
// overrides it to the 'danger' look regardless (a destructive
// confirm button reads as danger, not as a plain confirm).
const variant = b.danger ? 'danger' : b.class;
const btn = el('button', {
type: 'button', is: 'hive-btn',
const btn = el('hive-btn', {
type: 'button',
...(variant ? { variant } : {}),
}, b.label);
btn.addEventListener('click', () => done(b.value));