TLDR
Adding a web component in a pop-out window works as expected in Chrome / Edge. But in Firefox, before I add the web component to the dom it’s functioning, but just afterwards it reverts back to HTMLElement and the web component’s internal methods stop being recognized.
Here is a fiddle that is a simplified reproduction of this issue:
https://jsfiddle.net/2avd0un4/
Scenario
I have a two-screen app, the main window is basically an editor, and the second optional pop-up window is a preview. I’m using web components for most of the custom controls.
Problem
I mainly use Chrome / Edge, where this scenario works fine (web components are used as expected in the pop-up window). I did some testing in Firefox, and this issue was identified. I can programmatically create a web component, and check it’s working as expected. A shorthand for this is I check this.constructor.name from inside the component’s class when the component is connected. My example component is called “SayHello” which is the expected output.
In my real world project, the web component has a lot of internal methods which I use from inside the class like this.someFunction();.
The problem, in FireFox in the pop-out window, just after I add the web component to the dom with appendChild, the web component stops identifying as a SayHello and starts returning HTMLElement. Because of this, none of the internal methods in the class work, and the whole component basically stops functioning. Before it’s added to the dom it’s fine. But just after it reverts to HTMLElement.
Ask
Take a look at the Fiddle, it’s a simplified version of this. Trying it in Chrome / Edge will work, but it will fail and return HTMLElement in Firefox. Is there any way I can make this work?