Web Rush

Episode #101: Back to Basics with Native HTML and LitElement

Episode Summary

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?

Episode Notes

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

• ag-Grid

  

• Raygun

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)

• CSS Doodle
• Shader Doodle
• Block Link
• Button Element on Google Pay

White Label Components

• Lion
• Generic Components
• Alan on Dev.to

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.