Can't define new custom element after a previous one was created, in Add-On Content Scripts
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
People
(Reporter: contact, Unassigned)
References
Details
Attachments
(1 file)
791 bytes,
application/zip
|
Details |
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•3 years ago
|
||
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.
Updated•3 years ago
|
Comment 2•3 years ago
|
||
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•3 years ago
|
||
Hey Tom, do you know what's happening here (or can you please forward to someone who might know)?
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•2 years ago
|
||
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•2 years ago
|
||
str |
STR:
- Load attached extension at about:debugging
- Visit example.com
- 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•2 years ago
|
||
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•2 years ago
|
||
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•2 years ago
|
||
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•2 years ago
|
||
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•2 years ago
|
||
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).
Updated•2 years ago
|
Description
•