1716685 - Cannot access methods in Custom Elements in Addon scripts

Status: NEW

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

Description

[Elliott Marquez]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36

Steps to reproduce:

• Create a basic addon with a script
• Create a Custom Element in the script
• Add a method to that custom element
• Call that method from the custom element constructor
• Append custom element to page

e.g.

class FooSayer extends HTMLElement {
  constructor() {
    super();
    this.foo(); // this.foo is undefined
  }
  foo() { console.log('FOO') } // never gets called
}
customElements.define('foo-sayer');
const fooSayer = document.createElement('foo-sayer'); // should console log here
document.body.appendChild(fooSayer);

Actual results:

Silently exceptions on this.foo not being defined

Expected results:

'FOO' should have been logged in the console

Comment 1

[Alex Cornestean]

Hello,

I’m attempting to reproduce the issue however I’m having trouble with building the test add-on.

Would you mind providing a test add-on and more detailed steps to reproduce? Screenshots or screen recordings would also be helpful.

Thank you !

Comment 2

[Elliott Marquez]

My apologies. Here is a github Gist including the 3 files necessary in the same directory to make a minimal repro addon which I load via:

about:debugging#/runtime/this-firefox > load Temporary Add-on...

https://gist.github.com/e111077/699b275ba57ed5b30d5deab1236b4b3e

Comment 3

[Alex Cornestean]

Hello and thank you for the test add-on.

With the add-on loaded via about:debugging, I accessed http://example.com/ and opened both the web console and the browser console. I then proceeded to call this.foo in the web console, with the following results:

1. this.foo is undefined
2. “FOO” is not logged in the browser console

For more info check the attached screenshots.

Additionally, the browser console logs the following error when loading the add-on:
“uncaught exception: Unable to load script: moz-extension://07e14e80-49ec-47c0-997e-477f4f39de42/contentScript.bundle.js“

Based on these results, I think I reproduced the issue and will set the report to New. In case of error please revert the changes.
Tested this on the latest Nightly (91.0a1/20210621213500), Beta (90.0b10/20210620185922) and Release (89.0.1/20210614221319) under Windows 10 x64 and Ubuntu 16.04 LTS.

Comment 4

[Alex Cornestean]

Attachment: 2021-06-22_10h58_36.png

Comment 5

[Alex Cornestean]

Attachment: 2021-06-22_10h58_54.png

Comment 6

[Tomislav Jovanovic :zombie]

I've tried to find if this is a regressions, but it seems this has been happening for years, likely since first shipping custom elements. Which is weird, as I know other extensions have been using them succesfully, but perhaps they just haven't run into this (seemingly common) corner case.

Hey Olli, can you please take a look at what might be going wrong here?

Comment 7

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

Well, if there is error “uncaught exception: Unable to load script: moz-extension://07e14e80-49ec-47c0-997e-477f4f39de42/contentScript.bundle.js“
(from comment 3), something is going wrong with script loading, no? Or is the exception misleading?

Comment 8

[Tomislav Jovanovic :zombie]

I don't see that exception, only the undefined logged in the web console, and TypeError: this.foo is not a function in the browser console.

Comment 9

[Tomislav Jovanovic :zombie]

Also Alex, can you please re-confirm what errors you see in both web console and the browser console while testing this?

Comment 10

[Alex Cornestean]

Hello!

As requested, I’ve checked the logged errors and messages in both the web console and browser console when testing this issue and this is what is being logged at the current moment:

• web console: undefined logged in the web console when accessing http://example.com/
• browser console: TypeError: this.foo is not a function in the browser console when accessing http://example.com/

See screenshots for more details.

The other error I mentioned in Comment 3 i.e uncaught exception: Unable to load script: moz-extension://07e14e80-49ec-47c0-997e-477f4f39de42/contentScript.bundle.js is nowhere to be seen. Not when loading the test add-on, not when reloading the test add-on, not when accessing the add-on debug console nor when accessing http://example.com/.

Tested on the latest Nightly (92.0a1/20210808090543), Beta (91.0/20210804193234) and Release (90.0.2/20210721174149) under Windows 10x64 and Ubuntu 16.04 LTS.

Also tested on the Nightly the uncaught exception error occurred initially and can no longer reproduce the error there. It might have been a fluke. Really sorry for all the trouble around this uncaught exception.

Comment 11

[Alex Cornestean]

Attachment: 2021-08-09_12h43_33.png

Comment 12

[Alex Cornestean]

Attachment: 2021-08-09_12h52_08.png

Comment 13

[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 revert this change in case you think the bot is wrong.

Comment 14

[gold holk]

Hey, I just faced this bug, and there are something interesting that the bug does not occur in the moz-extension:// url of the same add-on.
Maybe this will be useful for you.
I am working on Tridactyl, and we just face this bug.
The related commit: https://github.com/tridactyl/tridactyl/commit/03a8a4cf397e460f3d61805fc95cdcdaf54b583a

Feel free to contact me if you need more information.
Hope you can resolve this bug soon!

Comment 15

[me]

Just to add some further context here, I'm seeing the same issue. Extending the HTMLElement works fine on chrome. On Firefox, in the content script, all class methods/attributes show up as undefined, for example:

class TestTest extends HTMLElement {
  constructor() {
    super()
    console.log(this.getText())
  }

  getText() {
    return 'test'
  }
}

customElements.define('test-test', TestTest)

Will error when creating the element. It does not matter if this is from the content script or browser context. The error happens on creation of an element.

Just normal class creation things like:

class TestTest {
  constructor() {
    super()
    console.log(this.getText())
  }

  getText() {
    return 'test'
  }
}

Will work fine.

Naturally, just creating the elements from the browser context itself works fine as well. The problem is with extending the HTMLElement from a content script which is completely broken.

Comment 16

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

I don't think I'm the right person to look into this since I don't know which addon scripts should be exposed to the web pages and how.

Comment 17

[Gavin Morrow]

This has happened to me :[

A workaround is to make the method private (since those seem to work just fine), and then assign it to a property.

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.foo = this.#foo.bind(this); // ← I'm not fully sure if the `.bind()` is necessary
  }
  foo() { console.log("foo!"); }
}

Comment 18

[gold holk]

(In reply to Gavin Morrow from comment #17)

This has happened to me :[

A workaround is to make the method private (since those seem to work just fine), and then assign it to a property.

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.foo = this.#foo.bind(this); // ← I'm not fully sure if the `.bind()` is necessary
  }
  foo() { console.log("foo!"); }
}

In fact you don't need to make it private (or bind it).
You just need to make it a become the instance's own property,
like my work around in tridactyl:
https://github.com/tridactyl/tridactyl/commit/03a8a4cf397e460f3d61805fc95cdcdaf54b583a