StencilJs 在新窗口中渲染组件

Question

I am looking for ways how to render chat widget created with stenciljs in a new window using window.open.

The new window is opened when clicking on the widget icon and it should preserve whatever state it currently has while navigating on the website. It should also have the styles and functionality of the parent.

I understand that with React I could utilise the portal so achieve that. But does anyone know how to do that with stenciljs? Or should I try to use React with Stenciljs and see where it goes?

Mock code:

<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>

So I want to open this part in new window:

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

I've already tried writing to the new window and appending header and content there. But there is likely a better way to do it. If any of you know how or have ideas, please share. Will do a wrap-up once this is solved.

Answer 1

Edit: problem solved. The entire component was already included in the new window and had to assign it a different pathname, add a method for checking the window.location.href and then updating component state.