Revealing the Differences between HTML Dialogs and the Popover API

The fully supported HTML dialog element and the newly released Popover API have some overlapping functionality but also a lot of unique features. Watch this to understand the differences.

Code from video: https://gist.github.com/prof3ssorSt3v3/f23929f66fb3cd8773f3d7b073df30a6

MDN reference for dialog element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

MDN reference for popover api: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

CanIUse coverage for popover api: https://caniuse.com/mdn-api_htmlelement_popover

0:00 Intro
0:45 Dialog element
4:45 Default Styling
6:00 Modal Concepts
8:27 Dialog Events
9:20 Dialog Return Values
11:55 Dialog Open Attribute
13:15 Popover API
16:18 popovertargetaction
18:00 Popover Events
21:21 More Styling