This is going to be Lit 🔥

JS Party: JavaScript, CSS, Web Development

Justin Fagnani joins us this week to talk about Lit, a library that helps you build web components. With 17% of pageviews in Chrome registering use of web components, Lit has gained widespread adoption across a variety of companies looking to create reusable components which leverage the power and interoperability of the web platform. Tune in to learn about what makes this tiny library so incredibly lit!

Join the discussion

Changelog++ members get a bonus 2 minutes at the end of this episode and zero ads. Join today!

Sponsors:

• Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com
• Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.
• Typesense – Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally can’t get any faster!

Featuring:

• Justin Fagnani – Website, GitHub, LinkedIn, Mastodon, X
• Amal Hussein – GitHub, X
• Kevin Ball – Website, GitHub, LinkedIn, X

Show Notes:

• Lit docs & examples
• Throwback Lit html episode on the Web Platform Podcast with Amal
• Polymer Library - Lit’s predecessor
• Custom Elements
• Shadow DOM
• Templates and Slots
• JS Tagged Template Literals
• Lit Element base class
• Amal’s singing about “dangerously set innerHTML”
• Proposal for Scoped Custom Element Global Registries
• Proposal for declarative Shadow DOM
• Proposal for Template Instantiation
• Proposal for DOM Parts
• Proposal for “open-stylable” Shadow Roots
• Proposal for JavaScript Decorators
• Lit labs packages
• Google’s Wireit - updates your npm scripts to make them smarter
• Justin’s npm cli RFC for adding Googe’s Wireit script runner to npm

Something missing or broken? PRs welcome!

Chapter

1. It's party time, y'all! (00:00:00)

2. Welcoming Justin to the show (00:00:40)

3. What is it? (00:02:36)

4. The evolution of the project (00:04:36)

5. How do updates flow in to the DOM? (00:10:02)

6. How it tracks data (00:11:19)

7. Managing references (00:14:38)

8. dangerouslySetInnertHTML (00:17:13)

9. Lit is simple (af) (00:21:25)

10. Absolutely necessary (00:23:54)

11. App frameworks built on Lit (00:26:41)

12. Who's using this? (00:31:33)

13. How Lit is governed (00:34:44)

14. Building for the platform first (00:38:48)

15. Web components aren't sexy (00:40:46)

16. Incorporating shadow DOM (00:43:26)

17. Good role models (00:53:35)

18. Justin's web wish (00:54:53)

19. Closing time (00:57:30)

20. Outro (00:58:46)