google chrome - Why can't you create Custom Elements in content scripts?

Question

I attempted to create a custom element in a Chrome extension content script but customElements.define is null.

customElements.define('customElement', class extends HTMLElement {
    constructor() {
        super();
    }
    ...
});

So apparently Chrome doesn't want content scripts to create custom elements. But why? Is it a security risk?

I can't seem to find anything in Chrome's extension guide that says it's not allowed.

Answer 1

You may want to first check this article to fully understand what custom elements do and how to build them. As discussed, in building a custom element, you also need to check if document.registerElement is available. Otherwise, you can simply load webcomponents.js to polyfill it.

Here are additional references that you may want to check for additional insights.

• Custom Elements v1: Reusable Web Components. Rules on creating custom elements are enumerated here.
• Registering a custom element from a chrome extension. This requires the usage of the webcomponentsjs polyfill. Chrome will prevent native registerElement from being executed within a chrome extension.