[BUG]: Could not detect element create by Firefox Addons

[g8up]

Describe the bug create an element in firefox addons content_scripts:

const style = `
<style>
  div{
    background: pink;
  }
</style>`;

const template = document.createElement('template');

template.innerHTML = `${style} <div> Great! </div>`;

class TamperElement extends HTMLElement {
  constructor() {
    super();
  }

  show() {
    alert('hi');
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({
      mode: 'open',
    });
    const instance = template.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
}

const ROOT_TAG = 'web-extension';

window.customElements.define(ROOT_TAG, TamperElement);

const newTag = document.createElement(ROOT_TAG, {

});

newTag.setAttribute('data-info', 'for test');

document.body.insertBefore(newTag, document.body.firstChild);

To Reproduce Steps to reproduce the behavior:

1. open a web page
2. open dev tools
3. switch to Web Components tab

Expected behavior no element is detected.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox v98.0.2

[Matsuuu]

Heya,

Thanks for reporting this! This should not be the case since the WC devtools is able to detect elements defined by itself too, so I don't see why it wouldn't for other extensions (given that you declare them onto the site itself).

Could you create a re-produced version of the example you listed, in a form that I could use in firefox devtools, (including manifest.json etc.) so that I could debug this a bit further?

[g8up]

@Matsuuu this is a mini re-produced version
https://github.com/g8up/custom-element-in-firefox-addon

[Matsuuu]

Thank you @g8up ! I'll look into it!

[Matsuuu]

Heya, I looked into this and noticed that the extension example you provided doesn't work on Chrome browsers at all.

On Firefox, the access to the customelement definition of your extension element is restricted.

I have a feeling that this has to do with the fact that you are declaring the custom element in the content script scope, which is not the same as the DOM actually on the page. How Web Component DevTools gets around this is that it injects some javascript into the actual web page, which then in turn calls the defining javascript code snippets on the client side, instead of the content script side.

So this is something that needs to be resolved at your end as I can't have a say on how you define your elements.

Hope this helps!