Replacing paper-dialog with web-dialog

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-modal has 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