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

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).