This video discusses considerations when creating a web component and deploying them in a way that is sustainable long term (I'm talking years). The example use-case involves replacing paper-dialog with web-dialog and tracing some considerations along the way including css.
High level take aways
- Always own the application connection element
- Semantic use-cases is key.
my-app-modalhas your app no longer caring about the shadowRoot - Talk to your element via events, bridge those events / properties into someone else's element
- web-dialog is a very impressive, highly accessible dialog box
- simple-modal takes it to the next level as far as integration capabilities, backporting some paper-dialog nice-ities, and enhancements to accessibility beyond the default
Code
- Monorepo of our code shown: https://github.com/elmsln/lrnwebcomponents/blob/master/elements/simple-modal/src/simple-modal.js (update published to npm soon)
- web-dialog tag - https://github.com/andreasbm/web-dialog
Top comments (0)