Is this just a new way the browser displays the <dialog> element exclusively? I'm pretty confused.
The CSS2.1 spec [1] describes how stacking contexts work when painting the browser window. Traditionally, our mechanism for interacting with an element's stacking context has been more or less exclusively to set its z-index.
The Fullscreen API spec [2] introduces a new stacking context called the "top layer", which has some unique properties. Most notably, things rendered in the "top layer" are always rendered on top of everything else, regardless of z-index. There is exactly one top layer per document.
Parts of this spec also describe operations which can add and remove elements from the top layer. For example, the "fullscreen an element" operation adds it to the document's top layer. [3] This operation is invoked as part of the steps taken when a developer calls `requestFullscreen()` on a DOM element [4].
Now, the `<dialog>` element as specified in the latest HTML spec [5] also interacts with the page's top layer. When you call `.showModal()` on a dialog element, it gets added to the document's top layer. Note that although this is a completely different API, the commonality here is that we're also interacting with the top layer by adding and removing elements from it.
The article also references some ongoing discussion [6] on a possible "popup" API which would also interact with the top layer, and which would be used for implementing various controls such as datepickers and dropdown lists.
Hope that helps!
1: https://www.w3.org/TR/CSS2/zindex.html
2: https://fullscreen.spec.whatwg.org/
3: https://fullscreen.spec.whatwg.org/#fullscreen-an-element
4: https://developer.mozilla.org/en-US/docs/Web/API/Element/req...
5: https://html.spec.whatwg.org/multipage/interactive-elements....
Sounds like an attribute does the actual promoting.