Web Components — From Zero to Hero

คอร์ส Web Components แบบ standalone ตั้งแต่ผู้เริ่มต้นจนถึงขั้นสูง — โมเดล component ที่ browser รองรับโดยกำเนิดและไม่ผูกกับเฟรมเวิร์ก Custom Elements, Shadow DOM, slot, การจัดสไตล์, event และ Lit ทุกตัวอย่างเรนเดอร์ในหน้าเลย

เริ่มที่นี่ ข้ามไปที่ Shadow DOM

สิ่งที่คุณจะได้เรียน

Intro & Custom Elements

สามเสาหลัก; การนิยามและใช้ custom element ตัวแรกของคุณ เริ่ม →

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

ภาษาอังกฤษและไทย, แบบทดสอบที่บันทึกความคืบหน้า และโหมดอ่านแบบไร้สิ่งรบกวน

ตรวจสอบล่าสุดกับ (2026)

Custom Elements v1 / Shadow DOM v1 / HTML Templates — Baseline Widely Available รองรับใน Chrome, Firefox, Safari และ Edge เวอร์ชันปัจจุบันทุกตัว
Customized built-ins (is=) — ยังไม่รองรับใน Safari; autonomous elements (extends HTMLElement) คือตัวเลือกที่พกพาได้
Declarative Shadow DOM (shadowrootmode) — ข้าม browser หลักตั้งแต่ Chrome/Edge 111, Safari 16.4, Firefox 123 (ต้นปี 2024) อย่าสับสนกับ attribute shadowroot แบบเก่าที่ไม่เป็นมาตรฐานซึ่งมีแค่ใน Chrome 90–110 เท่านั้น
:host-context() — รองรับเฉพาะ Chromium และถูกตัดออกจากสเปก CSS แล้ว ให้ใช้ CSS custom properties หรือ container style query แทน
Lit — เวอร์ชัน 3.x ขนาด ~5 KB ส่วน Polymer (ไลบรารีรุ่นก่อนของ Google) ถูก deprecated ไปแล้วเพื่อให้ทุกคนย้ายไปใช้ Lit