Intro & Custom Elements
สามเสาหลัก; การนิยามและใช้ custom element ตัวแรกของคุณ เริ่ม →
Web Components — From Zero to Hero
คอร์ส Web Components แบบ standalone ตั้งแต่ผู้เริ่มต้นจนถึงขั้นสูง — โมเดล component ที่ browser รองรับโดยกำเนิดและไม่ผูกกับเฟรมเวิร์ก Custom Elements, Shadow DOM, slot, การจัดสไตล์, event และ Lit ทุกตัวอย่างเรนเดอร์ในหน้าเลย
สิ่งที่คุณจะได้เรียน
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะได้เรียน”Lifecycle Callbacks
constructor, connected/disconnected, observed attributes, upgrade เรียน →
Shadow DOM
attachShadow, encapsulation, open กับ closed, :host และ boundary เรียนรู้ →
Templates & Slots
template ที่ inert, default & named slot, slotchange และ assigned nodes โปรเจกต์ →
Styling
:host, ::slotted, ::part, custom properties, adoptedStyleSheets จัดสไตล์ →
Attributes, Properties & Events
reflection, property กับ attribute, CustomEvent, composed event เชื่อมต่อ →
Patterns & Composition
composition, form-associated element, a11y, declarative shadow DOM ประกอบ →
Lit & Tooling
Lit (reactive props, lit-html, scoped styles), การใช้ WC ในเฟรมเวิร์ก, การเผยแพร่ ยกระดับ →
คอร์สนี้ทำงานยังไง
หัวข้อที่มีชื่อว่า “คอร์สนี้ทำงานยังไง”เรนเดอร์ใน browser ของคุณ
live preview รัน custom element แต่ละตัว — Shadow DOM, slot และการจัดสไตล์ปรากฏตรงนั้นเลย ไม่ต้องตั้งค่า
ไดอะแกรมที่อธิบายชัด
shadow tree, การ project ของ slot, การ reflect ระหว่าง attribute↔property และการประกอบ event เป็นไดอะแกรม Mermaid
vanilla ก่อน แล้วค่อย Lit
เรียน API ของแพลตฟอร์มตั้งแต่ต้น แล้วดูว่า Lit ทำให้ใช้งานง่ายขึ้นอย่างไร — ทั้งคู่เรนเดอร์สด
สองภาษา + read mode
ภาษาอังกฤษและไทย, แบบทดสอบที่บันทึกความคืบหน้า และโหมดอ่านแบบไร้สิ่งรบกวน