- 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
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