1893321 - Web components can't be added to the DOM of a pop-up window

Status: UNCONFIRMED

(Core :: DOM: Core & HTML, defect)

Description

[mattlag]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:125.0) Gecko/20100101 Firefox/125.0

Steps to reproduce:

1. Create a web component class, call it SayHello that extends HTMLElement, and have it log this.constructor.name in the constructor() function as well as the connectedCallback() function.

2. Create a pop-up window with window.open(), add basic elements to it's body.

3. Programmatically create a new instance of our web component const helloElement = new SayHello()

4. Add the element to the pop-up window with appendChild(helloElement)

This is just a simplified process of creating a web component, trying to add it to the DOM of a pop-up window, and checking what happens during the constructor phase and the connectedCallback phase.

Actual results:

The constructor logs this.constructor.name as "SayHello", but the connectedCallback function logs it as "HTMLElement". This change breaks the internal methods of the class as they are not recognized anymore.

It seems like right as the web component is added to the DOM of the popup window, something happens with the class / inheritance. This example is a simplified reproduction of a real web component I am using, and the issue I have is when the component reverts to HTMLElement, all it's internal functions can't be called... because it's no longer a SayHello. Trying to call this.someFunction(); from within the class results in the error "Uncaught TypeError: this.someFunction is not a function".

Expected results:

The Web Component should not revert to it's "HTMLElement" class after it's added to the DOM of a pop-up window.

I have a working JSFiddle that reproduces this issue: https://jsfiddle.net/2avd0un4/

Using web components in a pop-up window work as expected in Chrome / Edge.

Noticed on Firefox 125.0.2 (64-bit) Windows 11
Also tested on Firefox Nightly 127.0a1 (2024-04-24) (32-bit) + Troubleshooting Mode
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:127.0) Gecko/20100101 Firefox/127.0"

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Hi Adam, can you please check what's up in our code?

Comment 3

[Adam Vandolder [:avandolder]]

Unfortunately, this is another case of bug 1502814.