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

Loading content…

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