Repository navigation
feat: keep every portaled component inside a shadow root - #31
Merged
Merged
Conversation
Selects, comboboxes, menus, hover cards, context menus and toasts now resolve their teleport target through usePortalTarget like the dialogs already did, and expose a `to` override. The shadow-root container mirrors the nearest dark/light scheme class so dark tokens still apply to portaled content, and `shimmer` no longer hard-codes html.dark. Closes #30
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #30
Why
FormSelect(and every other popper, plus toasts) teleported todocument.body, so inside a shadow root the content left the tree holding the stylesheet and rendered unstyled. Only the dialog family had been fixed in #29.What changes
to?: string | HTMLElementoverride —FormSelect,FormCombobox,LayoutMenubar,OverlayDropdown,OverlayDropdownSub,OverlayHoverCard,OverlayContextMenu,FeedbackToasts, same asOverlayModal/OverlayDrawer/OverlayConfirm.usePortalTargetresolves the component's own root node instead of taking an anchor ref, so thedisplay: contentswrapper divs the dialogs carried are gone and components whose root is a real element keep inherited attrs where they belong.dark:utilities compile to.dark .x; a container appended to theShadowRoothad no.darkancestor, so portaled content rendered light in a dark host. The container now mirrors thedark/lightclass of the nearest scheme wrapper and follows toggles.shimmeremits:where(.dark)instead of:where(html.dark), so it matches the same descendant convention as every other dark token.test/portal.test.tsopens every portaled component in a shadow root (and in the body) and covers the scheme mirroring; a new Utilities/ShadowRoot story mounts them all inside a shadow root for visual checks. README andAGENTS.mddocument the convention.Verified
Light and dark, inside the story's shadow root — zero popups land in
document.body:darkNot in scope: vue-afloat tooltips are already shadow-aware at the library level; the
Utilities/*Overview links were already off (utility-vsutilities-) before this change.Created with the help of an agent.