[w3c/webcomponents] Document "layers" for single-use components (#806)

There are times when you want to render a component at a specific position in the window. It might be positioned relative to an element, such as a fancy tooltip or popup/context menu, or it might be a modal in the middle of the screen. At the moment, there's no way to render this transparently if you are a third-party on the web page.

Web components give a way to clearly define ownership between page author and component author:

```html
<!-- owned by the page author -->
<my-component foo="bar" baz="qux">
  #shadow-root
    <!-- owned by the component author -->
    <div> ... </div>
</my-component>
```

```javascript
// Owned by the component author
class MyComponent extends HTMLElement {
   // ...
}
```

However, if you want to render something at that arbitrary position, you have to do it in the page author's territory, and you have no encapsulation for the tree you want to add (even a custom element is susceptible to `*` selectors). With the original spec for ShadowRoot, you could solve this by adding a shadow tree to the document body for your component.  If other components also needed a shadow tree they could just add theirs, and the shadow trees stacked. This is [no longer planned](https://github.com/w3c/webcomponents/issues/780), there's no interest in it right now, and may never be from some vendors due to complexity.

I wondered if there might be interest in something like a simple layer on top of the viewport with its own stacking context, which is pretty much just a shadow tree.  It would have `show`/`hide` methods, so you could do something like this:

```javascript
import template from './component.html';
class FancyToolTip {
  #root = window.createShadowLayer();

  constructor() {
    this.#root.appendChild(template.cloneNode());
  }

  show(text = '') {
    this.#root.querySelector('.tooltip-text').textContent = text;
    this.#root.show();
  }

  hide() {
    this.#root.hide();
  }
}
```

Whichever layer is shown most recently would have the highest z-order. The layer itself would have no pointer events, but elements in it would.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/806