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-indexonly works on positioned elements (position: relative|absolute|fixed|sticky).
- 
Large z-indexjumps aren’t necessary - just ensure the intended order.
- 
Keep page-level stacking in the host; leave intra-component stacking to the component.