This is a collection of Web Component examples.
The intention of this repo is to give you an introduction into Web Components, there characteristics and some best practices.
All features and functions of those examples are documented as code comments. So pretty much every undocumented line of code was documented in a prior or easier chapter.
Most examples are written in ES6. The simple examples mostly show only a single feature and are not intended to run in all possible browsers! Those examples are working great in current Chrome releases. Production environments usually need to run bundlers like Webpack...
For a short summary and overview of the Web Component Specification see MDN Web Components
Even though all distribution folders are committed in this repository you might want to play around with the code examples.
Run yarn install to install all dependencies first.
See scripts property in package.json and run tasks as needed.
All build tasks are number by there chapter prefix number, e.g. yarn build-13.
-
Because most Browsers do not fully support the Web Components specifications we need to use polyfills
-
ES5 vs Native Custom Elements
- ES5-style classes don't work with native Custom Elements
- All constructors in an inheritance hierarchy must be ES5-style
-
Sharing of Styles into Shadow DOM is not (wisely) possible today (February 2018)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent