Customized built-in elements do not work in chrome extension?

Question

The problem

This autonomous custom element works both in the content.js(extension JavaScript context) and top JavaScript context:

window.customElements.get('custom-element') || customElements.define('custom-element', class extends HTMLElement {
  constructor() {
    super();
    console.log('custom-element constructed');
  }
  
  connectedCallback(){
    console.log('custom-element connected');
  }
});

let ce = document.createElement('div')
ce.innerHTML = `<custom-element name="my-element">`
document.body.appendChild(ce)

But this customized built-in element does not work in the extension JavaScript context, though it works in the top JavaScript context.

window.customElements.get('custom-builtin-element') || customElements.define('custom-builtin-element', class extends HTMLInputElement {
  constructor() {
    super();
    console.log('custom-builtin-element constructed');
  }
  
  connectedCallback(){
    console.log('custom-builtin-element connected');
  }
}, {extends: 'input'});

let cbie = document.createElement('div')
cbie.innerHTML = `<input is='custom-builtin-element' type="radio">`
document.body.appendChild(cbie)

Settings and tried

Here is the related part in manifest.json:

 "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "webcomponents-sd-ce.js",
        "content.js"
      ]
    }
  ]

The webcomponents-sd-ce.js is added according to this answer. And I also tried webcomponents-bundle.js.

My Chrome is the latest according to this answer: Version 119.0.6045.123.

---

(How) can I use the customized built-in element in a Chrome extension's content.js?

Any suggestions will be highly appreciated. Thanks in advance.

Answer 1

The main concern is namespace collision:

it IS actually impossible

If the extension goes first, the page will break. If the page goes first, the extension will break.

up to us extension devs

Some devs are great. Others are not necessarily aware of the consequences of some piece of code, and its our job (the platform developers) to mitigate that as much as possible.

Like I said whether or not it's up to devs, we've seen it happen, users complain to website owner that website doesn't work, website owner looks into it, finds extension, and eventually - blames us. Maybe we go and blame extension but, wow, does that all take a long time.

security issue

I don't think so, no more than DOM manipulation. JS code stays sandboxed.

---

Just a tried and true walk-round(thanks to this repo: ungap/custom-elements):
Download this min.js file into your project and include it in your content_scripts.

 "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "webcomponents-sd-ce.js",
        "min.js",
        "content.js"
        
      ]
    }
  ]

---

But as mentioned in the comments, the best practice is to avoid using custom elements in content.js at all.