A Modal Portal in Lit #3041
Replies: 4 comments 2 replies
-
Also, not to embarrass myself, but this is my first time publishing something NPM. I wanted to add a minified build that included our other dependency besides Lit, Immutable.js, which like |
Beta Was this translation helpful? Give feedback.
-
Thanks for showing your library! This is a pretty common need, and something we had addressed in Polymer with IronOverlayBehavior. We've been thinking we should probably port that (and a couple of Iron helpers) to Lit and make them available - which would be very much along the lines of this package here. I didn't have time to look too deeply, but I think we'll look into what you did, and hopefully if we publish something you won't have to maintain this if you don't have the time :) |
Beta Was this translation helpful? Give feedback.
-
Thanks for showing your work, @nicholas-wilcox! Very nice implementation. From what I can tell of your implementation, Nicholas, your I'm also exploring a portal implementation using Lit. Here is a StackBlitz: In particular, I'm exploring whether it's possible to leverage
I've gotten pretty close to a working implementation, in that the following works:
However, the following doesn't work, and I'm not sure if these are possible to do if leveraging
I'm not sure if these limitations are inherent in the implementation of |
Beta Was this translation helpful? Give feedback.
-
Bumping this because I recently refactored my library. I removed most of the code and focused on creating a custom Also, shout out to the lit-portal package made by @ronak-lm, which is a much better component-based solution than my package. |
Beta Was this translation helpful? Give feedback.
-
A project that I am developing for my company is a single page application created with Lit components. The requirements involved being able to open the same modal from different components, or from the same component that can appear in different parts of the DOM. I effectively needed to separate the template of the modal from the component that causes it to appear. Rendering a template somewhere else in the DOM is precisely what React portals are for.
So, I did my best to create something that works like a React portal, but built in Lit. You can find the repository here, and test out the package on NPM. It works by implementing a
<modal-portal>
custom element that you place at the bottom of your page, that attaches to a singleton controller that can be used to add/remove Lit templates from the "modal stack" (i.e. the DOM children of the<modal-portal>
).You can either use the
modalController.push()
method to programmatically push a single modal, or use aportal()
directive that allows the modal to reactively update with the component that used the directive.I don't really have the interest or bandwidth in actively maintaining the library, although I'll certainly take a look at any pull requests or bug reports. My manager and I just thought it would be a good thing to give back to the community, if only as an example that people can copy or modify to use in their own projects.
Beta Was this translation helpful? Give feedback.
All reactions