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

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.