บทนำและ Custom Elements

Web Components คือชุดมาตรฐานที่มาพร้อมกับ browser ซึ่งช่วยให้คุณนิยาม HTML element ของตัวเองได้ — นำกลับมาใช้ซ้ำได้ ห่อหุ้มเป็นเอกเทศ และไม่ผูกติดกับเฟรมเวิร์กใด ไม่ต้องมีขั้นตอน build ไม่ต้องมีไลบรารี มีแค่แพลตฟอร์มล้วน ๆ

คอร์สนี้จะพาคุณไปทำความรู้จักกับสามเสาหลักที่เกี่ยวเนื่องกัน:

flowchart LR
  CE["Custom Elements
(class + define)"]
  SD["Shadow DOM
(encapsulated tree)"]
  TS["Templates & Slots
(declarative markup)"]
  CE --> SD
  SD --> TS
  CE --> TS

สามเสาหลักของ Web Components

เสาหลัก	สิ่งที่คุณจะได้
Custom Elements	API แบบ class สำหรับสร้าง HTML tag ใหม่
Shadow DOM	DOM tree ส่วนตัวที่ห่อหุ้มเป็นเอกเทศ และขอบเขต CSS เฉพาะตัว
Templates & Slots	ชิ้นส่วน HTML ที่นำกลับมาใช้ซ้ำได้ พร้อมจุดแทรกเนื้อหาที่ตั้งชื่อได้

เมื่อจบโมดูลนี้ คุณจะได้นิยาม custom element ตัวแรกของคุณตั้งแต่ต้น และได้เห็นว่า Lit ต่อยอดจาก primitive เดียวกันนี้อย่างไร

Custom element ตัวแรกของคุณ

โค้ดด้านล่างนิยาม <hello-badge> — custom element แบบ vanilla ที่อ่าน attribute ชื่อ name แล้วแสดงข้อความทักทาย

<hello-badge name="Web Components"></hello-badge>

เกริ่นนำ Lit

Lit คือไลบรารีบาง ๆ ที่เพิ่ม reactive properties และระบบ template แบบ declarative เข้าไปบน API มาตรฐานของ Custom Elements และ Shadow DOM โดยจะลงรายละเอียดในโมดูล Lit and Tooling — ตรงนี้เป็นแค่ตัวอย่างสั้น ๆ เพื่อยืนยันว่าเส้นทาง import ทำงานได้ในตัวรันเนอร์นี้:

<lit-hi></lit-hi>