Open Bug 1771291 Opened 3 years ago Updated 2 years ago

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

Categories

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

Firefox 100
defect

Tracking

()

Tracking Status
firefox110 --- affected
firefox111 --- affected
firefox112 --- affected

People

(Reporter: contact, Unassigned)

References

Details

Attachments

(1 file)

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.

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.

Component: Untriaged → Console
Product: Firefox → DevTools
Component: Console → Untriaged
Product: DevTools → WebExtensions

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 !

Flags: needinfo?(contact)

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

Flags: needinfo?(evilpies)

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

Flags: needinfo?(evilpies)

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'})
Status: UNCONFIRMED → NEW
Component: Untriaged → General
Ever confirmed: true
Flags: needinfo?(contact)
See Also: → 1820521

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

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.

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.

Flags: needinfo?(smaug)

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)

Flags: needinfo?(smaug)

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(wdurand)

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

Component: General → DOM: Core & HTML
Flags: needinfo?(wdurand)
Product: WebExtensions → Core
Severity: -- → S3
See Also: → 1836269
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: