There could be some use cases that become simple to achieve if we could have browser windows that rendered as part of the same document with the same JS context.
F.e., imagine the following opens a new window:
<body><!-- this renders in the parent window -->
<div>Take a look at the content in the window.</div>
<window opened width="800" height="600">
<!-- this renders in a child window that pops open -->
<div>I am content in another window, but in the same DOM and JS context.</div>
</window>
</body>
Then in the same context, we can easily work with it:
const d = document.querySelector('window > div')
d.innerHTML = 'I am in another window and my content was edited from the parent window context.'
Not only would multi-window applications become super simple to orchestrate…
… It would also solve the complexity of rendering Custom Elements across windows (see this StackOverflow question).
It is (or at least seems) very difficult to make multi-window applications using the same (or subsets of) the custom elements that are in the parent Window.
With this feature, we can do the following with Custom Elements:
<script>
class MyEL extends HTMLElement { /* ... */ }
customElements.define('my-element', MyEL)
</script>
<body>
<!-- my-el works in the parent window -->
<my-el>Take a look at the content in the window.</my-el>
<window opened width="800" height="600">
<!-- my-el also works in the child window -->
<my-el></my-el>
</window>
</body>
Because we’re using the same DOM, note that CSS styling also applies in the child window.
With the current API (using window.open) styles need to be manually copied over or linked in the child window. Custom Elements need to be re-defined in the child window, event needs to be wired up via postMessage, etc. It’s a lot of pain and easy to do it wrong and leaves a big surface area for bugs to infest.
The new <window> feature would solve all of that. F.e., here’s a complete example, including CSS:
<style>
my-el { background: pink }
</style>
<script>
class MyEL extends HTMLElement { /* ... */ }
customElements.define('my-element', MyEL)
</script>
<body>
<!-- my-el works in the parent window, has a pink background -->
<my-el>Take a look at the content in the window.</my-el>
<window opened width="800" height="600">
<!-- my-el also works in the child window, also has a pink background -->
<my-el>I am content in another window, but in the same DOM and JS context.</my-el>
</window>
</body>
