This polyfill does not work in IE11

[cogwizzle]

I've been struggling to get this to work for a few days and I have tried to piggyback off of other tickets where people are having trouble in IE11, but it has not worked. I've created a jsfiddle to demonstrate this polyfill fails in IE11. https://jsfiddle.net/jfehrman/rcp59q4w/ If I am doing something wrong please let me know!! It works in every other browser!!

[cogwizzle]

So some good news and bad news. I was partially wrong with my post. It does work if you use babel. If you take my script file and compile it using babel it seemed to work. Bad news is it doesn't seem to work with extending html elements such as...

   class YellowButton extends HTMLButtonElement {
      constructor() {
      	super();
      }
      
      connectedCallback() {
      	this.style = 'background-color: yellow';
      }
    }
    
    customElements.define('yellow-button', YellowButton, { extends: 'button' });

errors can be seen here for IE...
https://jsfiddle.net/jfehrman/rcp59q4w/30/embedded/result,css,html,js

[cogwizzle]

On another note I did get my project working using another library...

<script>this.customElements || document.write('<script src="//unpkg.com/document-register-element"><\x2fscript>');</script>

Not sure why this one worked really simply and I had so many problems with this polyfill. Any advice would be appreciated.

[web-padawan]

It does work if you use babel.

Babel is naturally a must for IE11 and Custom Elements, as they use ES2015 classes.

Bad news is it doesn't seem to work with extending html elements such as HTMLButtonElement

That won't work in Safari either, as their team objected to extending customised built-in elements.
This is why this polyfill does not implement them, see webcomponents/custom-elements#88

There's another polyfill here but it has restrictions: https://github.com/ungap/custom-elements-builtin

[cogwizzle]

@web-padawan Thanks for the response. I think we should move to implement extending web components in this polyfill because it is part of the V1 specification. https://w3c.github.io/webcomponents/spec/custom/

Historically allowing companies like Microsoft and Apple try to dictate web standards hasn't worked out well. Microsoft has all of the issues with IE, and JScript and Apple has Safari (aka Modern Browser IE) and their initial apprehension with progressive web apps, which they initially broke down to implement.

I don't mean this to come across as hostile or belligerent so please excuse my bluntness if it has come across that way. Thanks for offering up the additional polyfill.

Do you know if there is a plan to implement extending native web components in the future? What are the workarounds besides using another polyfill for people who want this functionality?

[web-padawan]

Historically allowing companies like Microsoft and Apple try to dictate web standards

Let's not discuss these topics here. See WICG/webcomponents#509 (comment)

Do you know if there is a plan to implement extending native web components in the future? What are the workarounds besides using another polyfill for people who want this functionality?

I'm a community member, not a maintainer of the polyfills. The previous answer from the Polymer team who also works on polyfills can be found here https://github.com/webcomponents/custom-elements/issues/13#issuecomment-441880910

[cogwizzle]

Let's not discuss these topics here. See w3c/webcomponents#509 (comment)

I feel like this might be the place to discuss it as ultimately it has informed the decision for supporting a feature. Unfortunately, the politics of Apple is affecting the direction of this polyfill.

I'm a community member, not a maintainer of the polyfills. The previous answer from the Polymer team who also works on polyfills can be found here webcomponents/custom-elements#13 (comment)

The polymer thread is very helpful, and it seems as though their polyfill is headed towards supporting the standard which is great!

[dfreedm]

We're not interested in implemented extending native elements at this time. The correct venue to discuss browser support for extending native elements is the w3c or whatwg spec threads.