8000
Jun 2, 2025
·
0 comments
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji
reacted with thumbs down emoji
reacted with laugh emoji
reacted with hooray emoji
reacted with confused emoji
reacted with heart emoji
reacted with rocket emoji
reacted with eyes emoji
Putting out Feelers - Thinking with Portals #844
MSILycanthropy
started this conversation in
General
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey all, recently I've been working on a few floating components with Stimulus, ie a popover, dropdown, tooltip, etc. And just wanted to start some discussion on what is a potentially useful concept, Portals.
For those that don't know, a Portal is a concept from React in which effectively one piece of the DOM is teleported and shown elsewhere in the DOM. Similar is Vue's (Teleport)[https://vuejs.org/guide/built-ins/teleport] component.
Ultimately, the problem I run into is creating some floating menu and one of the bajillion ancestors has an undesirable
overflowset, so you end up with things like this,When building this in particular, I ended up just trying to reparent the content into the body, which of course breaks all of Stimulus' behavior.
Previous Discussion
There was some previous discussion here. The answer was a bit lackluster though, advising to just move the controller up to the body level. Then it'd potentially become a bit of a mess managing the state of each individual floating element.
Theoretical API
My imagination for the API of this is quite simple, just an extra data attribute.
Where the
data-portaled-toattribute takes any valid CSS selector. Then, the HTML from thecontenttarget would be lazily moved to the body when the getter is called in the Controller.The Fundamental Problem
This does sort of fundamentally violate the tacit assumption Stimulus makes that everything occurs with the controller element. And that alone could just kill this from the get go.
Other issues are things handling Event Listeners, should there be some method of deferring them based on a value (this would honestly be useful on it's own). Otherwise they'd connect once on page load and then reconnect when portaled.
The concept sort of breaks a lot of what Stimulus is built on, but it also opens the door to a handful of useful things that aren't currently possible to build in their best form with Stimulus.
If the answer is just accept that Stimulus can't do this and use the dialog and popover instead. That'd honestly be fair. Just wanted to kickstart some discussion and see if the juice is potentially worth the squeeze.
Beta Was this translation helpful? Give feedback.
All reactions