Z-index & Shadow DOM: how stacking works

FAQs
1

Z-index & Shadow DOM: how stacking works

What’s going on?
Shadow DOM creates isolated stacking contexts. To ensure overlays (e.g., dropdowns) render above content below them, rows inside our component receive incrementing z-index values. This is intentional.

Can I turn off the per-row z-index?
No. It’s required for correct layering within a single Shadow DOM component.

How do I control which component appears on top at the page level?
Set z-index on the component’s host/container (outside the Shadow DOM). Don’t override internal row values.

/* Page-level layering between separate Shadow DOM hosts */
.component-a { position: relative; z-index: 2; } /* above */
.component-b { position: relative; z-index: 1; } /* below */

Gotchas

  • z-index only works on positioned elements (position: relative|absolute|fixed|sticky).

  • Large z-index jumps aren’t necessary - just ensure the intended order.

  • Keep page-level stacking in the host; leave intra-component stacking to the component.