Let’s Play Web Components, using Lit3 or Svelte

What is W3C

What is w3c?

• W3C (World Wide Web Consortium)
• W3C defines what Web Components are.
• 

What is Web Components ?

• Web Components = Custom Elements + Shadow DOM + HTML Templates
• Encapsulated, reusable UI building blocks
• Interoperable across frameworks or vanilla HTML
• Supported in modern browsers, polyfilled if necessary

What is Shadow DOM?

• Shadow DOM allows you to create a separate, encapsulated styling scope for your web component.

Why choose Lit

Lit Pros and Cons

• Pros of Lit
  • Highly Reusable
  • Progressive like Vue
  • Lightweight Bundle Size
  • No virtual DOM overhead
  • Entirely written in TypeScript
• Cons of Lit
  • small eco
  • higher learning curve
  • cannot tailwind

Why choose Svelte

• Can compiled with vite
  • very easy to set github-actions
• align with svelte eco

My Examples

This slide system

my origin lit3 wc: https://github.com/PosetMage/cdn/tree/main/lit3

my svelte ver wc: https://github.com/PosetMage/wc

my Jekyll blog exmaple: https://homun.posetmage.com/Tools/OS/Container/MediaTool/

END

Thank You