bochap
commented
5 years ago This code does not look correct https://github.com/googlecodelabs/chrome-es2015/blob/7f3d24ce4ec706725e604814c5e56392054437cd/scripts/main.js#L149 based on the syntax of https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define
And looking at this commit https://github.com/googlecodelabs/chrome-es2015/commit/7f3d24ce4ec706725e604814c5e56392054437cd I think the code was changed from document.registerElement but the function signature was not changed https://developer.mozilla.org/en-US/docs/Web/API/Document/registerElement
The previous commit for ES6 version (https://github.com/googlecodelabs/chrome-es2015/commit/b72c713140e5d8786e50f505ee13cafd4e7639b1) worked since it uses the class syntax which fits the syntax of customElement.define
I found the following issue https://github.com/w3c/webcomponents/issues/587 talks about the changes customElement.define. The solution to support the non class syntax was to use Reflect.construct. I have forked this repository and actually made the code use Reflect.construct. It is working on Google Chrome | 76.0.3809.100 (Official Build) (64-bit)
The repo is here: https://github.com/seetd-opensource/chrome-es2015. I will be happy to put in a PR if this code is good for the examples.
Disclaimer I got it to work but I am not sure if this is production grade code since Web Components are new to me and I am still learning about this as well
Project is not working if you download the zip and start server. There are couple of js errors in the console. Please update the attached zip in the codelab.
Error description:
main.js:149 Uncaught TypeError: Failed to execute 'define' on 'CustomElementRegistry': The callback provided as parameter 2 is not a function. at main.js:149and main.js:74 Uncaught TypeError: note.setMessage is not a function at StickyNotesApp.displayNote (main.js:74) at new StickyNotesApp (main.js:34) at main.js:88