Why can't you create Custom Elements in Chrome Extensions?

Question

I attempted to create a custom element in a Chrome extension but customeElements.define is null.

customElements.define(\'customElement\         


        

Answer 1

As of now custom element can be used in chrome extensions UI. In Popup ui, option page ui and in the content script as well But it requires a polyfill which is this. https://github.com/GoogleChromeLabs/ProjectVisBug - this is the one big custom element in the chrome extension.

Answer 2

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.