IE11 "The custom element being constructed was not registered with 'customElements'"

wiledal commented 7 years ago

Hello! This plugin looks like what I've always wanted. I'm having some issues however.

Custom elements fail to initiate in IE11 with this error:

Working fine in Chrome 59, Firefox 54, Edge 38, and Safari 10

The JS was compiled using gulp-babel with settings:

const gulp = require('gulp')
const babel = require('gulp-babel')
const concat = require('gulp-concat')

gulp.task('default', () => {
  return gulp.src('source/js/**/*.js')
    .pipe(concat('app.js'))
    .pipe(babel({
      presets: [
        'es2015'
      ],
      plugins: [
        ['transform-builtin-classes', {
          'globals': ['Array', 'Error', 'HTMLElement']
        }]
      ]
    }))
    .pipe(gulp.dest('./build/js'))
})

Bare bones HTML and JS for testing:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="https://cdn.rawgit.com/webcomponents/custom-elements/f27a9390/custom-elements.min.js" charset="utf-8"></script>
    <script src="app.js" charset="utf-8"></script>

    <cool-element></cool-element>
  </body>
</html>

class CoolElement extends HTMLElement {
  connectedCallback () {
    this.innerText = 'Hello World'
  }
}
customElements.define('cool-element', CoolElement)

Am I missing anything?

WebReflection commented 7 years ago

do you see same error in this page? https://webreflection.github.io/hyperHTML-Element/test/

The used configuration is this one: https://github.com/WebReflection/hyperHTML-Element/blob/master/.babelrc

wiledal commented 7 years ago

Hey,

IE11 throws syntax errors on that page due to arrow-functions.

WebReflection commented 7 years ago

That's because I'm stupid and wrote wrong link.

Can you try again, please? https://webreflection.github.io/hyperHTML-Element/test/?es5

wiledal commented 7 years ago

Different issue! But looks like the <my-input> is at least initiating.

screenshot 2017-08-02 09 23 37

screenshot 2017-08-02 09 24 06

WebReflection commented 7 years ago

will have a look, I'm sure at some point everything was working in IE11 too. Apologies for any inconvenience

WebReflection commented 7 years ago

It was rather an HyperHTMLElement class issue, it was doing weird prototypal runtime changes unsupported by non Reflect.construct aware engines.

Fixed in HyperHTMLELement v0.2.2

WebReflection commented 7 years ago

Uh ... wait, I think I've fixed my issues, but you were not using HyperHTMLElement class at all ... do you mind trying using it?

https://github.com/WebReflection/hyperHTML-Element/blob/master/index.js

I am trying to figure out if it's a gotcha of the transpiled code hence something easy to document as caveat, thanks for your patience and help.

WebReflection commented 7 years ago

So ... it's been a fun journey.

Thanks to this issue, I've discovered a bug related to IE11 in my Custom Elements polyfill

However, once I've patched my polyfill, you can see everything works as expected: https://webreflection.github.io/babel-plugin-transform-builtin-classes/test/

It's your code with my polyfill instead (which is used by AMPHTML Google project too, in case you are guessing if it's "a cool one")

TL;DR you should use a better polyfill for Custom Elements :wink:

Thanks for the report though!

wiledal commented 7 years ago

Ah!

Yes, it does indeed work using your polyfill instead of the 'webcomponents' one (https://github.com/webcomponents/custom-elements). Interesting.

Seems like I'll be using document-register-element in the future! A bit unfortunate with the v0 naming tho, hehe 🙃

Thanks!

WebReflection commented 7 years ago

A bit unfortunate with the v0 naming tho

I've created the V0 polyfill first, and when V1 came up all V0 users asked me when V1 would've been implemented in the V0 polyfill :smile:

It ended up implementing V1 on top of V0 so that Chrome with V0 but no V1 would've benefit from it, and every other browser would've benefit from the battle-tested/stable V0 polyfill and its target devices

Although, I agree that name for a repository and a polyfill in general (dre anyone?) was very naive of me :man_shrugging:

WebReflection / babel-plugin-transform-builtin-classes

IE11 "The custom element being constructed was not registered with 'customElements'" #1