With regards to CSS Positioned Layout Module Level 4 (top layer)

I am dealing with all sort of weird behaviour with web components. There is no spec explaining how the top layer is controlled when web components get involved.
E.g. say two web components each with a dialog.
I have seen behaviour where I have to set the z-index on dialog's (in chrome) to make them appear above other web components, which seems to go against the purpose of the top layer in the first place.

At the momment I have tried adjusting the ordering in which web components are created, the order in which dialogs are open'ed, the order in the DOM in which the components appear, and can't demystify what is happening with the ordering in the top layer. Chrome dev tools only show the #top-layer badge for dialogs not in the shadow DOM.

Please add an authoritive spec defining in which order in the top layer dialog will appear when they are dynamically created within web components.