question about document-register-element/test/

[Jeff17Robbins]

On Chrome Version 60.0.3112.113 (Official Build) (64-bit) (running on Windows 10), the test returns

Passed 91 Tests and then 40 result divs, each with class="pass".

On IE11, the same test

returns

Passed 89 Tests and also, seemingly, the same 40 results divs.

This led to my question(s):

What are the 2 tests that didn't pass on IE11? Is there some way to get the test to show me? Finally, is this an expected difference?

[WebReflection]

this polyfill is for Custom Elements only. IE11 has no Shadow DOM so this test is skipped: https://github.com/WebReflection/document-register-element/blob/master/test/document-register-element.js#L331-L345

[Jeff17Robbins]

Ah, I see. So if I had looked more carefully (my bad!), I would have noticed that on IE11 the test ouput V0: Observe changes when attached to V1 Shadow Root (0, 0, 0)

whereas on Chrome the test ouput V0: Observe changes when attached to V1 Shadow Root (1, 0, 0)

I didn't notice that the parenthetical numbers had a leading 0 on IE11 and 1 on Chrome.

So inspecting more carefully, I also see

V1: real classes (0, 0, 0) on IE11. Because, of course, no real classes on IE11.

So that's why I see 89 tests pass on IE11.

Is there an example of your very nice V1 polyfill running on IE11? Am I forced to use babel to compile ES6 classes into ES5? Or is there a simpler example to look at?

[WebReflection]

Am I forced to use babel to compile ES6 classes into ES5?

are you targeting IE11 ? If so, how are you expecting to do so without transpiling classes?

[WebReflection]

Anyway, these are transpiled Custom Elements behind HyperHTMLElement class and it works on IE11 too https://webreflection.github.io/hyperHTML-Element/test/?es5

[Jeff17Robbins]

I figured I'd just start with whatever code the transpiler outputs. I'm just trying to learn how all this works on IE11. Ultimately we'd use Babel and classes, I guess.

[WebReflection]

If so, you need this to make it happen or it will break because Babel has broken classes once transpiled.

Welcome to transpilers hell :tada:

[Jeff17Robbins]

Yeah, I was hoping to look at an output so I could put off learning about transpiler hell. There are a lot of new concepts all at once for me, and our customer base has entrenched IE11, so I can't simply ignore it and jump in with both feet into the world of ES6 classes. I will study your hyperHTML-Element example, thank you very much for providing it!

[WebReflection]

I was hoping to look at an output

The output is produced by Babel, the transpiler ...

I can't simply ignore it

Nope, you have to test in there too. All I'm saying is that this polyfill works for IE11 (actuallyl even IE9) and Google AMP Project uses this polyfill too. Also StencilJS uses this polyfill too.

It's the most battle-tested/compatible out there

and jump in with both feet into the world of ES6 classes

You can if you know how to do that. You need Babel with preset ES2015 and also the transpiler plugin I've mentioned already, here again: https://github.com/WebReflection/babel-plugin-transform-builtin-classes

[WebReflection]

P.S. there is a ready to use configuration in here: https://github.com/WebReflection/babel-plugin-transform-builtin-classes#usage

[Jeff17Robbins]

I may be missing something, or simply more ignorant or lazy than you are realizing, but isn't there some already transpiled output JS for a simple V1 CustomElement I could look at?

My hope was to make a tiny IE11 test.html that included your scripts in the head, and also included this hoped-for simple-element.js, so I could look at what happens to the source code with class in it vs the output simple-element.js file.

[WebReflection]

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

[WebReflection]

And that is the output you are asking for. It's generated through Babel. Nobody writes that manually.

[Jeff17Robbins]

I get that about writing it manually -- yikes!

I was assuming I would bury all that boilerplate in a library. The introduction of "hyperHTML" has confused me somewhat, though. What is that? Is it a helper concept you've created? How does it relate to creating a simple V1 custom element, and then transpiling that element to IE11 ES5?

[WebReflection]

https://github.com/WebReflection/hyperHTML-Element

https://github.com/WebReflection/hyperHTML-Element#compatibility