- <dialog>.showModal() is an indirect API to `top-layer`.
- `top-layer` is kind of like a sibling to the root <html>, elements can be placed into the top-layer from any position in the existing DOM (it is like they have two positions). This allows co-locating your <dialog> next to the relevant elements in the tree.
- There is only one `top-layer` but it can have many children. Last opened === current element on top.
- Z-index has no effect in the top-layer. No need to compete for a higher z-index.
- ::backdrop is a pseudo element that you can style behind the <dialog>. It is always below the last <dialog> opened.
- <dialog>.showModal() is an indirect API to `top-layer`.
- `top-layer` is kind of like a sibling to the root <html>, elements can be placed into the top-layer from any position in the existing DOM (it is like they have two positions). This allows co-locating your <dialog> next to the relevant elements in the tree.
- There is only one `top-layer` but it can have many children. Last opened === current element on top.
- Z-index has no effect in the top-layer. No need to compete for a higher z-index.
- ::backdrop is a pseudo element that you can style behind the <dialog>. It is always below the last <dialog> opened.
- Not supported in Safari <= 15.3