Episode #101: Back to Basics with Native HTML and LitElement
Alan Davalos drops a wealth of knowledge and links on LitElement including: what is LitElement? What is CSS encapsulation? How does LitElement help with templating? Is LitElement able to integrate with other components? How do you define an attribute value? And How does Fast compare with LitElements.
Recording date: August 25, 2020
John Papa @John_Papa
Ward Bell @WardBell
Dan Wahlin @DanWahlin
Craig Shoemaker @craigshoemaker
Alan Davalos @AlanGDavalos
Brought to you by
Actionable error, crash and performance monitoring. Raygun gives you visibility into how users are really experiencing your software. Detect, diagnose and resolve issues with greater speed and accuracy.
Resources:
- Web Components
- Shadow DOM
- Render HTML with Vanilla JavaScript and LitHTML
- CSS Encapsulation
- lit-html
- Polymer Project
- LitElement
- LitElement with Vue.js
- Model Viewer
- Iooxa
- Haunted
- Defining a property in LitElement
- Events in LitElement
- Web Component Benchmark
- FAST
- Vanilla JavaScript and HTML - No frameworks. No libraries. No problem
- Web Component Benchmark
- Open WC
Cool Components (LitElement)
- Modelviewer
- Stripe Elements
- WiredJS
- Chessboard elements
- Uni Virtualizer
- Iooxa
- Apollo Elements
- Lottie Player
Cool Components (Not LitElement)
White Label Components
Timejumps
- 01:32 Guest introduction
- 02:50 What is LitElement?
- 07:17 What is CSS encapsulation?
- 10:18 Sponsor: Raygun
- 10:49 Wrapping everything into a component
- 13:34 How does LitElement help with templating?
- 22:57 Is LitElement able to integrate with other components?
- 35:56 How do you define an attribute value?
- 40:33 Sponsor: Ag Grid
- 41:34 How does Fast compare with LitElements?
- 47:42 Where to go to learn more
- 50:13 Final thoughts
Podcast editing on this episode done by Chris Enns of Lemon Productions.