分离 HTML 元素并在新的浏览器窗口中打开，而不会破坏样式

Question

我正在用Polymer3(Javascript ES6和imports(构建一个SPA。我的应用程序需要将一些小部件移动到新的浏览器窗口。然后，用户可以在拥有多个显示器时将一些小部件移动到多个屏幕。以下是我从现有窗口中分离元素并将其附加到新窗口的过程。

1. 使用 HTML DOM removeChild(( 方法分离元素
2. 使用 window.open("， "myWindow"，'modal=yes' 创建新窗口(;
3. 使用 newWindow.document.body.appendChild(element( 将新元素附加到新窗口;

问题

1. 当元素位于新窗口中时，它不采用父窗口样式。
2. 分离元素时，某些父窗口样式会损坏。

任何人都可以指导如何实现我的要求吗？

Answer 1

我不是 100% 确定它会起作用，但您可以打开已经打开两次的同一窗口。第二次，使用附加参数打开它。 例如

// your app root url -> http://localhost/mySPA
widget1Window = window.open("http://localhost/mySPA/widget1", "myWindow",'modal=yes');
and in your app template you map that route to specific widget.
e.g in pseudo angular2 code, both routes load the same page, but with 
different conditions in route.
<app>
<maincontent>
<common-stuff-between-windows></common-stuff-between-windows>
<widget1 *ngIf="showWidget1"></widget1>
<widget2 *ngIf="showWidget2"></widget2>
</maincontent>
</app>
and in your javascript routing you would check if the route contains
a widget reference. If yes, then make that part of the template visible.