This is the first time again I tried to create a html web component after the changes in specification. This is also a chance for me to practice Javascript promises, and async/await.

In this pen, I used Web Components to implement message box in HTML, CSS, and Javascript.

I didn't use any preprocessors, libraries, and frameworks in my Javascript code, so that I could use this dialog box wherever I want.

I used custom element to create my own dialog box, and shadow DOM for me to style my component without affecting any of the styles outside the shadow DOM. Although, I used a class name, I think that might be unique.

Because I used Web Components, Promise, async/await to implement the dialog box, this pen might not work on older browsers.

The color scheme of dialog box can be light or dark depends on the color scheme of your system.