ts-hello | Separate branches | Frontend Framework library

it all depends on which browsers you want to support and bundle syntax that your application is generating.

@webcomponents/custom-elements/src/native-shim and @webcomponents/webcomponentsjs/custom-elements-es5-adapter.js serve the same purpose, these are used if the browser does not support ES2015 modules or because the application is explicitly configured to generate ES5 only bundles.

@webcomponents/custom-elements and @webcomponents/custom-elements/src/native-shim also serve the same purpose which is to provide support for custom elements for browsers that do not natively support Custom Elements.

More information about those polyfills and why and when they are needed;

• https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements
• https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

I wouldn't recommend on using the below pattern.

Well you need a few changed in order to make it work in a Stackblitz environment.

First you need this package :

@webcomponents/webcomponentsjs

Then you need to add it to polyfills.ts

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'

And also you should remove the

You should run node main.js instead of main.ts. You compile your .ts file and it creates it's .js file. So you need to run that compiled .js file via node.