DEV Community

loading...

Discussion on: 🤯 Create a modal with zero line of CSS 🤯

Collapse
samthor profile image
Sam Thorogood

Nice post! There's also a polyfill: github.com/GoogleChrome/dialog-pol... (shameless self-promotion)

And Firefox has an incomplete implementation behind a flag: bugzilla.mozilla.org/show_bug.cgi?...

Collapse
mornir profile image
Jérôme Pott Author

Thank you for your comment!😃

I've updated my post to mention your polyfill. But I feel like the biggest “selling point” for using the dialog element is its ease of use. Personally, if I have to install a npm package and then register DOM elements, I would rather create my own modal with CSS or install a npm package like vue/react-modal if I am using a framework.

Collapse
samthor profile image
Sam Thorogood

Sure, but dialog is only supported in Chrome, so in my opinion it's unreasonable to ship it without a polyfill.

I appreciate your argument, but I think it implies that you should always just create your own modal and not use the built-in one :)

Thread Thread
mornir profile image
Jérôme Pott Author • Edited

Yes, in the current state of adoption, your polyfill is the only way to use the dialog element in production.

And if a developer uses React or Vue, he/she can easily overcome the polyfill's major limitation (stacking context) by using portals. ✌️