Repository: electron
Issue: [Feature Request]: Displaying normal html tags from a document in a separate window
Labels: enhancement :sparkles:

### Preflight Checklist

- [X] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [X] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a feature request that matches the one I want to file, without success.

### Problem Description

Hi，Can I make a request that displaying a document's div tag in a separate window, but the operations in the new window are still managed by the original one?
我需要让某个窗口的document中的一个div标签显示在一个新的窗口，并且这样做之后，新窗口中的操作，仍然由原来的窗口管理。

The reason why I need such a function is because I want to make an editor, which can drag some small forms out to be an independent window like Photoshop.
我之所以需要这样的功能是因为，我需要制作一个编辑器，需要像ps那样，能够把一个小的表单从主窗口中拖拽出来，成为一个独立的窗口。

In order to do not re-establish the state of the form when I dragging it out. I consider creating these forms through `BrowserView`, and then when I dragging these froms out, keeping the original `webcontents` objects and using it in the newly created window.
为了让表单被拖拽出来时，不需要重新建立表单的状态，我首先考虑是通过`BrowserView`创建这些表单，然后当表单被拖拽出来时，保留原来的`webcontents`对象，在新创建的窗口中使用它。

However , this solution can not allow the form to participate in the layout calculation of the web page content of the original window, so I switch to using the `<webview>` tag
但是这样做不能让表单参与到原来窗口的网页内容的布局计算，所以后来我换成了使用`<webview>`标签

Essentially, doing that still creates a lot of independently running web pages. It's not as convenient as operating in this same dom node tree, and also consumes more performance.
这样做本质上还是创建了很多个独立运行的网页，不能够像处在同一个dom节点树中操作方便，而且也比较消耗性能。

Since I didn't find a better solution, In the end I could only try to use `window.open` to open a blank page, and then append the div elements to the new window directly, like this
由于没有找到比较好的解决方案，我最后采用的方案是使用`window.open`打开一个空白页，然后把当前页面中的div元素直接append到新窗口恢复状态中，就像这样

```javascript
const win=window.open();
const el=document.querySelector('div');
win.document.body.append(el)

// recover
document.body.append(el)
win.close()
```

However, there are two problems with doing this,
The first one is while it can make the listeners which bound to these elements run as usual,  the event cannot bubble to the original document. 
The other is the original imported public css style cannot be inherited in the new window. This problem can be Temporarily resolved by reintroducing these styles in newly opened windows.
这样做能够让原来绑定在这些元素上面的监听器正常运行，但是事件无法冒泡到原来的document上了，另外一个问题是这样做无法在新的窗口中继承原来引入公共css样式，这个问题暂时可以通过在新打开的窗口中重新引入这些样式来解决。

So as to make this feature transparent to the user. I hope when the element is displayed in a new window, it still remains original position in the dom tree. It will be the best when I just add a certain attribute to the div tag, and it becomes an independent window.
为了使这个特性对使用者透明，我期望是，当这个元素被显示到新的窗口之后，它仍然处于原来的dom树中的位置。最好是仅仅对这个div标签添加某个属性之后，它就成为一个独立的窗口。

Here is my ideal situation
下面是我理想中的状况
```
const el=document.createElement('div');
el.setAttribute('show','window');
// This div will be displayed as a new window

document.body.append(el);
// After being added to the current dom node tree, this tag is still displayed in a new window

el.setAttribute('show','inline');
// At this time, the div will return to normal display
```

### Proposed Solution

Make an document's element displayed in a new window,
使document中的某个元素独立出来显示在一个新的窗口，

+ Do not affect the original function，不影响原来的功能，
+ Inherit the original public css style，继承原来公共css样式，
+ Events are still able to bubble up to the original document，事件仍然能够冒泡到原来的文档，

### Alternatives Considered

Creating windows by using the aforementioned `window.open`
使用前面提到的window.open的方式创建窗口


### Additional Information

_No response_