CODEWITHSUNDEEP
javascripthtmlcustom-element
BRO_THOM
BRO_THOM

Reputation: 851

HTML Custom Elements in firefox/edge

I'm well aware that the custom elements feature can be enabled manually by setting dom.webcomponents.enabled and dom.webcomponents.customelements.enabled to true in the configuration (in Firefox at least), but can anyone help me out as to explain why the use of custom elements is encouraged in almost all documentation (w3, mozilla, etc), but only Chrome seems to be supported this feature properly.

Lately I've been using this polyfill to get customElements to work on other browser:

defineElement = function( tag, opt ){
    if( typeof customElements !== 'undefined' ){
        customElements.define( tag, opt );
    } else {
        document.registerElement( tag, opt );
    }
}
class HTMLxSearchElement extends HTMLElement{
    constructor(){
        super();
        console.log('super');
    }
}
defineElement( 'x-search', HTMLxSearchElement )

But now the document.registerElement function has also been removed! Does anyone have any alternatives to get this functionality back up and running?

Upvotes: 2

Views: 4507

Answers (4)

doubleya
doubleya

Reputation: 539

I was running into customElements not defined error on the Edge browser with my web component that I created using Angular Elements and my solution was to run:

npm i -S document-register-element

and in my Angular Elements projects polyfills.ts file, I added:

import 'document-register-element'

That solved the problem for me.

Upvotes: 1

GullerYA
GullerYA

Reputation: 1776

Native Custom Elements V1 spec implementation is available in FireFox as of version 63.

So Chrome, FireFox, Opera and parallel mobile version for those are all supporting custom elements.

Safari's support lacks customized built-in elements up till now.

Upvotes: -1

makeros
makeros

Reputation: 41

For now just use the polyfill https://github.com/WebReflection/document-register-element . It's align to the Custom Element v1. It's working fine with IE10+ and all other browsers. For more and newest information see https://developers.google.com/web/fundamentals/web-components/

Upvotes: 4

Supersharp
Supersharp

Reputation: 31219

Use of Custom Elements v1 is encouraged in some documentations because it is a HTML/Javascript WHATWG standard.

Now it's implemented in Chrome, but also is Opera and Safari.

registerElement doesn't work any more with Firefox 59+ because Custom Element v0 implementation was deprecated.

Upvotes: 0

Related Questions