Expose a stack of Top Layer elements

[valdrinkoshi]

Building custom overlays is hard, especially because of how stacking context works - more context here https://github.com/PolymerLabs/iron-overlay#the-problem

Delegating to the end user the responsibility of declaring overlays in a stacking-context-safe parent node is not viable for Custom Elements authors and users, as they would have to trade encapsulation to solve this issue.

We need an API to explain the magic of the <dialog>, specifically why it is not affected by the stacking context trap.

Proposed solutions:

• css property position: top-layer
• stack of Top Layer elements (similar to the proposed Blocking Elements stack) e.g.

document.topLayerElements.push(element);
document.topLayerElements.pop();
document.topLayerElements.remove(element);
document.topLayerElements.top;

@alice @domenic WDYT?

[domenic]

Dupe of #897, modulo #2341 :)

[valdrinkoshi]

@domenic how is this a dupe of #897?
My understanding is that Blocking Elements stack ensures no other element is interactive, except the current blocking element. The problem exposed here is that custom elements don't have a way to register as top layer elements.
e.g. http://jsbin.com/kuboqa/1/edit?html,output

<style>
  .backdrop {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .overlay {
    position: fixed;
    z-index: 2;
  }
</style>

<div class="backdrop"></div>

<!-- this creates a new stacking context -->
<div style="transform: translateZ(0);">
  <div class="overlay">
    <button>click me!</button>
  </div>
</div>

^ you cannot click the button in .overlay because stacking context

[domenic]

I'm confused now. Are you talking about top layer (the subject of #897) or stacking contexts? They are completely different and unrelated things.

[valdrinkoshi]

For the way I see it, being in the Top Layer has two perks:

1. users cannot interact with any other part of the document
2. elements in the Top Layer are subject to the Top Layer's stacking context - aka rendered on top of everything else even if they're declared inside an element that creates new stacking context

#897 addresses only 1), right?

[domenic]

No, #897 is about putting things in the top layer, period. It's not about some kind of half-top-layer feature, it's about the actual top layer.

[valdrinkoshi]

Good to know, thanks for clarifying 👍
It wasn't immediately clear that Blocking Elements === Top Layer Elements.

[domenic]

Yep, that's the "modulo #2341" part.