kitchen-sink

custom elements

create / define custom element
- es6 classes
content
- innerHTML
- template
lifecycle
- connectedCallback
  - disconnectedCallback
  - observedAttributes / attributeChangedCallback
getters and setters
property-attribute reflection
property vs attribute

shadow DOM

attach shadow
open vs closed mode
encapsulation
expose variables
variables default value
:host selector
:host presedence
slots
- default slot
- multiple items in slot
- light DOM vs shadow DOM
- ::slotted selector
- ::slotted presedence
- ::slotted targeting deep elements

cool-stop-watch

event handling
change detection