1. Getting Started
1.1. Custom Elements Everywhere
1.2. open-wc
1.3. lit.dev
2. Questions? https://kitoman.com https://virtua.tech https://github.com/kito99/github-repo-list
3. Kito D. Mann https://kitomann.com
3.1. https://virtua.tech Principal Consultant at Virtua: Consulting, training, mentoring on web dev and back-end Java
3.2. Java Champion
3.3. Participated in several Java Community Process expert groups (including CDI, JSF, and Portlets)
3.4. Jakarta EE Guardian Leadership Council Member
3.5. Google Developer Expert on Web Technologies
3.6. Co-host of Stackd Podcast (https://stackdpodcast.com)
3.7. Internationally recognized speaker
3.8. Founder of https://SpeakerTrax.com
4. Demo
4.1. Project setup
4.2. Basic - one component
4.3. Add card component
4.3.1. Styles, sharing
4.4. Add filter
4.4.1. Attributes vs properties
4.5. Add slots
4.6. Add CSS Custom properties
4.7. Add a Reactive Controller
5. Resources
5.1. Awesome Lit: GitHub - web-padawan/awesome-lit: A curated list of awesome Lit resources.
5.2. Stencil
5.3. State of Web Components in 2022
5.4. All the Ways to Make a Web Component - Feb 2022 Update
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.2.4. Scoped Custom Element Registries
6.3. Browser support
6.4. Framework support
6.5. Adoption
6.5.1. Chrome Stats
6.6. Example
7. Simple. Fast. Web Components.
7.1. From Google Polymer Team
7.1.1. Successor to Polymer 3
7.2. Features
7.2.1. TypeScript / Babel / JS 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