Let’s Play with Lit 3! Using AI to Help Write Web Components

My Examples

origin Jekyll: https://jekyll.github.io/minima/

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

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…

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

Svelte

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

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

END

Thank You