Shadow root z-index/stacking context behaviour in custom element

[nstansbury]

There appears to be no mention in the current spec of the expected behaviour when creating a new CSS stacking context for a child node of a shadow root.

The use cases are tooltips/popups, custom drop-down lists, badges etc, where a child of the shadow root defines a new stacking context whose parent stacking context is outside of the custom element, and where the expected behaviour would be such that the child node is rendered over the custom element and its sibling elements in the normal document tree.

In the latest version of Chrome/Safari only position: fixed; renders a new stacking context outside of the custom element, all other documented scenarios create a stacking context whose parent is rendered internally to the custom element. I am unsure whether this is a browser bug or an undocumented requirement.

Declaring:

<select><option value="value1">Value 1</option></select>

In a custom element works as expected, where the list is rendered 'over' both the element declaring it and any adjacent siblings.

[rniwa]

custom element or shadow DOM does not create its own stacking context. You're supposed specify whatever CSS needed to make your component work using :host.

[nstansbury]

Yes I appreciate that from this comment, however neither Chrome or Safari currently support stacking contexts outside of the custom element itself unless using position:fixed; and the spec. doesn't mention the expected behaviour, so I am unable to raise a bug with the respective teams without clarification.

[rniwa]

Do you have a concrete examples (written in HTML/CSS) that demonstrate what you're saying? I don't think what you're describing is true.

[nstansbury]

My apologies you are correct - I had managed to inherit a spurious overflow: hidden; which prevented the expected behaviour. The stacking context behaviour is consistent.