---
title: Let's Play with Web Components
---

<div class="slide">

## Let's Play Web Components, using Lit3 or Svelte

<img src="https://avatars.githubusercontent.com/u/1905708" style="background-color: white; height: 300px;">


</div>

<div class="slide">

## What is W3C

#### What is w3c? 
  * W3C (World Wide Web Consortium)
  * W3C defines what Web Components are.
  * <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/210px-W3C%C2%AE_Icon.svg.png" style="background-color: white; height: 64px;">

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


</div>

<div class="slide">

## Why choose Lit

  <div class="embed_youtube" yt-title="在你不知道的角落，前端的未来正在回归本源" yt-url="J_xIxliB0Jo" yt-width="700">Loading content...
  </div>

</div>

<div class="slide">

## Lit Pros and Cons

<img src="https://lit.dev/images/logo.svg" style="background-color: white; height: 64px; border: 10px solid white;">

* Pros of Lit
  * Highly Reusable
  * <span style="font-size: 1.5em;">Progressive like Vue</span>
  * Lightweight Bundle Size
  * No virtual DOM overhead
  * Entirely written in TypeScript

* Cons of Lit
  * small eco
  * higher learning curve
  * cannot tailwind

</div>


<div class="slide">

## Why choose Svelte

<img src="https://raw.githubusercontent.com/gaia-green-tech/svelte-ackee/HEAD/img/svelte-logo.png" style="background-color: white; height: 64px; border: 10px solid white;">

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

</div>

<div class="slide">

## My Examples

This slide system

my origin lit3 wc: [https://github.com/PosetMage/cdn/tree/main/lit3](https://github.com/PosetMage/cdn/tree/main/lit3)

my svelte ver wc: [https://github.com/PosetMage/wc](https://github.com/PosetMage/wc)

my Jekyll blog exmaple: [https://homun.posetmage.com/Tools/OS/Container/MediaTool/](https://homun.posetmage.com/Tools/OS/Container/MediaTool/)

</div>

<div class="slide">

## END

Thank You

</div>

<script src="https://posetmage.com/cdn/js/EmbedYoutubeVideo.js">