Web components 101

  • what is web component (inert templates, markup encapsulation)
  • shadow DOM (creating shadow root with its own template)
  • basic styling (how shadow boundary works and what we can style from inside of component and from main DOM)
  • advanced styling (:host, :host-context, deprecated ::shadow and /deep/)
  • component projection
  • styling projected elements, css vars and mixins

How to follow

open index.html

Go with git tag and you will see all the steps you can follow. start with git checkout initial, then go through subsequent git checkout stepX.

See what steps are all about using git log --oneline --decorate