1771291 - Can't define new custom element after a previous one was created, in Add-On Content Scripts

Status: NEW

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

Description

[Ionut Colceriu]

Steps to reproduce:

In an Add-On Content Script, after creating a previously-defined custom element, new custom elements cannot be defined.

The same functionality works when run on a page, outside of Add-On Content Scripts.

Actual results:

customElements.define('test-1', class extends HTMLElement {
  constructor () {
    super()
    console.log('constructor test-1')
  }
})
// this will call the constructor
document.createElement('test-1')

customElements.define('test-2', class extends HTMLElement {
  constructor () {
    super()
    console.log('constructor test-2')
  }
})
// the test-2 custom element is not defined, and the constructor is not called
document.createElement('test-2')

The work-around is to not create the custom elements until both custom elements are defined.

customElements.define('test-1', class extends HTMLElement {
  constructor () {
    super()
    console.log('constructor test-1')
  }
})

customElements.define('test-2', class extends HTMLElement {
  constructor () {
    super()
    console.log('constructor test-2')
  }
})

// this will call the constructor
document.createElement('test-1')
// this will also call the constructor
document.createElement('test-2')

Expected results:

Both custom elements should be defined.

Comment 1

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

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

Comment 2

[Alex Cornestean]

Hello,

I’m from QA and I’m attempting to reproduce the issue in order to confirm it.

Would you be able to provide some more detailed steps to reproduce and possibly the extension you used when you encountered the issue?

Thank you !

Comment 3

[Tomislav Jovanovic :zombie]

Hey Tom, do you know what's happening here (or can you please forward to someone who might know)?

Comment 4

[Tom S]

I don't know what is going here. (Probably something involving wrappers though) Edgar Chen seems to have worked on custom elements before.

Comment 5

[Rob Wu [:robwu]]

I can reproduce. The snippet above can be run from any content script to reproduce the issue.

I have created a modified test case (I'll attach that); The test case below adds a third customElements.define call + construction, but using a different element prototype. That does not raise an error.

Because of that observation, I think that this may have something to do with Xrays. possibly related to bug 1820521.

customElements.define('test-1', class extends HTMLAnchorElement {
  constructor() {
    super()
    console.log('constructor test-1')
  }
},{extends: 'a'})
// this will call the constructor
document.createElement('a', {is: 'test-1'})

customElements.define('test-2', class extends HTMLAnchorElement {
  constructor() {
    super()
    console.log('constructor test-2')
  }
}, {extends: 'a'})
// Asynchronously throws NS_ERROR_UNEXPECTED; element is not upgraded, and the constructor is not called.
document.createElement('a', {is: 'test-2'})

customElements.define('test-3', class extends HTMLInputElement { // Note: different super class
  constructor() {
    super()
    console.log('constructor test-3')
  }
}, {extends: 'input'})
// this will call the constructor though.
document.createElement('input', {is: 'test-3'})

Comment 6

[Rob Wu [:robwu]]

Attachment: customElements-content-script.zip

STR:

1. Load attached extension at about:debugging
2. Visit example.com
3. Look at the console.

Expected:

• constructor test-1
• constructor test-2
• constructor test-3

Actual:

• constructor test-1
• NS_ERROR_UNEXPECTED:
• constructor test-3

Comment 7

[Alex Cornestean]

Hello,

Using the extension and STR from Comment 6, I reproduced the issue on the latest Nightly (112.0a1/20230306211718), Beta (111.0/20230306162820) and Release (110.0.1/20230227191043) under Windows 10 x64 and macOS 11.3.1.

Marking the affected versions accordingly.

Comment 8

[Tomislav Jovanovic :zombie]

Hey Olli, I think you did lots of work on Custom Elements (and understand our Sandboxes), do you perhaps have an idea what we could do here?

It is a bug for extensions, but I don't think we are the best positioned to solve it without the help from the DOM/SM teams.

Comment 9

[Olli Pettay [:smaug][[e-mail]]]

Does it help if you use proper class names?
(I couldn't get the addon working after unzipping and zipping again. about:debugging complains about manifest.json, even though it is there in the .zip)

Comment 10

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

The severity field is not set for this bug.
:willdurand, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 11

[Rob Wu [:robwu]]

Moving to the component of custom elements, because the involved API is maintained there. See comment 6 and comment 5 for reproduction steps (more thorough than the original report).