1. You
2. Kito D. Mann (@kito99) https://kitomann.com
2.1. https://virtua.tech Principal Consultant at Virtua: Consulting, training, mentoring on web dev and back-end Java
2.2. Java Champion
2.3. Participated in several Java Community Process expert groups (including CDI, JSF, and Portlets)
2.4. Jakarta EE Guardian Leadership Council Member
2.5. Google Developer Expert on Web Technologies
2.6. Co-host of Stackd Podcast (https://stackdpodcast.com)
2.7. Internationally recognized speaker
2.8. Founder of https://SpeakerTrax.com
3. Demo
3.1. Project setup
3.2. Basic - one component
3.3. Add card component
3.3.1. Styles, sharing
3.4. Add filter
3.4.1. Attributes vs properties
3.5. Add slots
3.6. Add CSS Custom properties
4. Resources
4.1. Awesome Lit: GitHub - web-padawan/awesome-lit: A curated list of awesome Lit resources.
4.2. Stencil
4.3. All the Ways to Make a Web Component - Feb 2022 Update
4.4. Custom Elements Everywhere
4.5. State of Web Components in 2022
5. Getting Started
5.1. open-wc
5.2. lit.dev
6. Web Components what's in the browser, stays in the browser
6.1. Core Specs
6.1.1. (Autonomous) Custom Elements
6.1.2. HTML Templates (Template Element)
6.1.3. Shadow DOM
6.2. Related Specs
6.2.1. Empowering Shadow DOM
6.2.1.1. Declarative Shadow DOM
6.2.1.2. CSS Shadow Parts
6.2.1.3. Constructable Stylesheets
6.2.2. Form-associated Custom Elements
6.2.3. HTML Modules
6.3. Browser support
6.4. Framework support
6.5. Adoption
6.5.1. Chrome Stats
6.6. Example
7. Lit
7.1. From Google Polymer Team
7.1.1. Successor to Polymer 3
7.2. Features
7.2.1. TypeScript / Babel Decorators
7.2.2. Templating (lit-html)
7.2.2.1. Directives
7.2.3. Reactive properties
7.2.3.1. Automatic support for properties<->attributes
7.2.3.2. Automatically updates the component if the value has changed
7.2.3.3. @property - public
7.2.3.4. @state - private
7.2.4. Lifecycle methods
7.2.5. Reactive controllers
7.2.6. Context
7.2.7. Async Tasks
7.2.8. Mixins
7.2.9. Lit Labs
7.3. Adopters
7.4. Examples
7.4.1. JavaScript
7.4.2. TypeScript