Series · 15 phần
Web Components từ nền tảng đến production
Lộ trình tiếng Việt 15 phần đi từ mental model của browser platform tới một component library có thể dùng trong HTML thuần, React và Vue. Chặng đầu làm rõ Custom Elements, lifecycle, upgrade, public API, render và state bằng JavaScript không framework. Chặng tiếp theo đào sâu Shadow DOM, composed tree, slots, CSS encapsulation, theming, events, focus, accessibility và form-associated custom elements với ElementInternals. Sau checkpoint vanilla, series chuyển sang testing trên browser thật và Lit: reactive properties, template bindings, directives, update lifecycle, controllers và kiến trúc state. Hai phần cuối xử lý performance, security, Declarative Shadow DOM, SSR, packaging, type, versioning và interoperability. Một Mini Kanban accessible nối các quyết định kỹ thuật xuyên suốt series.
01 Nền tảng Custom Elements
Hiểu component model gốc của browser, lifecycle, upgrade, public contract và cách render state không cần framework.
-
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.
-
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.
-
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.
-
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.
02 Encapsulation và component tương tác
Làm chủ Shadow DOM, slots, theming, event boundary, focus, accessibility, HTML form và một capstone vanilla.
-
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.
-
Thiết kế ranh giới CSS cho Web Components bằng inheritance, custom properties, :host, ::slotted, ::part, exportparts và constructable stylesheets có fallback.
-
Làm chủ event phases, bubbles, composed, cancelable, retargeting và focus; xây kb-task-card có semantics, accessible name và keyboard contract đúng nền tảng.
-
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.
-
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.
03 Testing và Lit
Khóa public contract bằng browser test rồi thay boilerplate bằng Lit mà không thay đổi component model.
-
Kiểm thử public contract của Accessible Mini Kanban trên browser thật: lifecycle, upgrade, attribute/property, event, slot, keyboard và form trước khi refactor sang Lit.
-
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.
-
Đào sâu Lit 3: reactive properties, năm kiểu binding, keyed list, built-in và custom directives, events, update lifecycle, styling, slots và controllers.
-
Thiết kế state ownership cho Mini Kanban bằng reactive properties, immutable updates, Lit controllers, @lit/context và @lit/task có chống race/abort.
04 Production và phát hành
Đánh giá hiệu năng, security, SSR/DSD, đóng gói, versioning và interop qua capstone component library.
-
Đưa Mini Kanban tới production: đo performance, giữ DOM ổn định, đặt ranh giới bảo mật và progressive-enhance SSR bằng Declarative Shadow DOM.
-
Khép series bằng Mini Kanban: chốt public contract, package ESM và types, Custom Elements Manifest, SemVer, npm pack, rồi kiểm chứng trong HTML, React và Vue.