Web Component Support Broken?

[fireflysemantics]

Angular CLI generates es5 and es2015 production files and chooses which to load. I seems like this change broke the generation of Web Components.

Wrote the issue up with Github repositories for testing here:

https://stackoverflow.com/questions/61168457/fs-gist-js1-error-typeerror-i-createshadowroot-is-not-a-function-on-angular-we

I've tried testing the webcomponent created in a minimal enviornent:

https://github.com/fireflysemantics/fs-gist-minimal

When loaded it produces this error:

ERROR TypeError: n.createShadowRoot is not a function
at new si (fs-gist-2015.js:1)
at e.createRenderer (fs-gist-2015.js:1)
at fs-gist-2015.js:1

[alan-agius4]

Hi, sounds like you are using native shadow DOM which is only available in Chrome. createShawdowRoot is also deprecated and replaced by attachShadow https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

Looking at the encapsulation of the component in your project, the component is using ViewEncapsulation.Native, which is also deprecated. The recommended replacement is ViewEncapsulation.ShadowDom. More info: https://angular.io/api/core/Component#encapsulation

Can you check if changing this solves the issue?

Thanks.

[fireflysemantics]

AWESOME - Changing to ViewEncapsulation.ShadowDom fixes it! Thanks! I updated both repositories for reference in case anyone else wants to play with this.

[fireflysemantics]

Any thoughts on this:
https://stackoverflow.com/questions/61177477/polyfill-support-for-angular-9-custom-elements

[alan-agius4]

Hi @fireflysemantics, I'll answer on SO.

[fireflysemantics]

@alan-agius4 Thanks for elaborating on the SO question. I ran into a new problem. This @Input property is not being set. This is the SO post. Any ideas?

https://stackoverflow.com/questions/61225191/angular-custom-element-input-property-not-initializing

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}