ข้ามไปยังเนื้อหา

Lit และ Tooling

โมดูลนี้คืออะไร

Vanilla Custom Elements API ช่วยให้คุณสร้าง HTML elements ที่กำหนดเองได้ แต่เมื่อ component มีความซับซ้อนมากขึ้น การจัดการ state, การ re-render DOM และ scoped styles ด้วยมือนั้นก็จะยุ่งยากขึ้นตามไปด้วย

Lit เป็นไลบรารีขนาดเล็ก (~5 KB) จาก Google ที่วางอยู่บน Custom Elements มาตรฐาน Lit เพิ่ม reactive properties, declarative templates ผ่าน tagged template literals และ scoped styles ในรูปแบบที่กระชับและมีประสิทธิภาพ

วงจรอัปเดตแบบ Reactive

Lit ตั้งเวลา microtask update ทุกครั้งที่ reactive property เปลี่ยนค่า แทนที่จะ re-render ทันที:

flowchart LR
  PropChange["Property
changes"] --> Schedule["Schedule
microtask
update"]
  Schedule --> ShouldUpdate["shouldUpdate()"]
  ShouldUpdate --> Render["render()
lit-html diff"]
  Render --> Updated["updated()
optional hook"]

วงจรอัปเดตแบบ Reactive ของ Lit

สิ่งที่โมดูลนี้ครอบคลุม

บทเรียน	สิ่งที่คุณจะได้เรียน
ทำไม Lit	จุดอ่อนของ Vanilla และเมื่อไหร่ที่ Lit ช่วยได้
LitElement	Reactive properties, render, scoped styles
การใช้ใน Frameworks	นำ web components ไปใช้ใน React, Vue, Angular
การเผยแพร่	การเผยแพร่ npm, Custom Elements Manifest, รองรับ browser

ตัวอย่าง: Lit Hello World

ดูว่า Lit ทำให้การสร้าง component ง่ายขึ้นได้อย่างไรในตัวอย่างด้านล่าง:

<lit-hello></lit-hello>

ทดสอบความเข้าใจ