新窗口中的StencilJs呈现组件

Question

我正在寻找如何在一个新窗口中使用window.open渲染与stenciljs创建的聊天小工具。

当点击小工具图标时，新窗口就会打开，它应该会保留当前在网站上导航时的状态。它还应该具有父级的样式和功能。

我知道，有了React，我就可以利用门户来实现这一点。但是，有谁知道如何使用stenciljs做到这一点呢？或者我应该尝试在Stenciljs中使用React，然后看看它会发生什么？

模拟代码：

<Host class="chat">
 {this.state.open ? (
   <div class="chat-wrapper">
     <chat-header customparam={this.customparam} />
     <chat-content anotherparam={this.anotherparam} />
   </div> 
  ) : (
   <open-chat
     label={this.state.openChatLabel}
     onClick={this.openChat.bind(this)} />
   )}
</Host>

所以我想在新窗口中打开这个部分：

<div class="chat-wrapper">
  <chat-header customparam={this.customparam} />
  <chat-content customparam={this.customparam} />
</div> 

我已经尝试写入新窗口，并在那里添加标题和内容。但可能有更好的方法来做到这一点。如果你们中的任何人知道怎么做或有想法，请分享。一旦这个问题得到解决，我就会做一个总结。

Answer 1

编辑:问题已解决。整个组件已经包含在新窗口中，必须为其分配一个不同的路径名，添加一个用于检查window.location.href然后更新组件状态的方法。