Default HtmlDialog vs Extended HtmlDialog

The default HtmlDialog (baseline since March 2022) has these benefits:

But has some limitations. Can we solve them using web components?

Default HtmlDialog Element

  • Scrolls content behind 👎
  • Click outside does not close 👎

"Custom Element" that extends HtmlDialog

  • Scroll is locked 👍
  • Click outside closes dialog 👍
  • Manages state via state attribute
Very long scrollable section