Web Components · Phần 1 — Mental Model nền tảng & Custom Element đầu tiên
Phân biệt Web Components, Custom Elements, Shadow DOM và template; xây kb-task-card đầu tiên theo hướng progressive enhancement bằng API gốc của trình duyệt.
Filter/Tag
#custom-elements
8 entries
-
-
Web Components · Phần 2 — Custom Elements: Registry, Upgrade & Lifecycle
Hiểu quy tắc đặt tên, CustomElementRegistry, cơ chế upgrade và lifecycle; làm kb-task-card an toàn khi detach, reconnect, di chuyển hoặc đổi document.
-
Web Components · Phần 3 — Public API: Attributes, Properties & Events
Thiết kế contract cho kb-task-card: attribute primitive, property có type, boolean reflection, method có chủ đích và CustomEvent để Kanban giao tiếp lỏng.
-
Web Components · Phần 4 — Render, State, Template & Ranh giới bảo mật
Dùng template, state ownership và targeted DOM updates để kb-task-card render idempotent, giữ focus/node identity và không biến dữ liệu ngoài thành innerHTML gây XSS.
-
Web Components · Phần 5 — Shadow DOM, slots và composed tree
Hiểu host, light DOM, shadow tree và composed tree; dùng slot mặc định, named slot, fallback và slotchange để xây kb-task-column có API composition rõ ràng.
-
Web Components · Phần 8 — Form-associated elements với ElementInternals
Xây kb-priority-picker tham gia HTML form như control gốc: submit value, validation, labels, disabled, reset và state restoration bằng ElementInternals.
-
Web Components · Phần 11 — Lit 3 và component đầu tiên
Hiểu Lit 3 như lớp render và reactivity trên Web Components; viết lại kb-task-card mà vẫn giữ nguyên public contract, accessibility và contract test.
-
Web Components · Phần 9 — Vanilla capstone: một component hoàn chỉnh
Checkpoint ghép Custom Elements, Shadow DOM, slots, public events, theming, accessibility, ElementInternals và Declarative Shadow DOM thành một toggle dùng được.