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
#web-components
15 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 6 — CSS encapsulation, theming và shadow parts
Thiết kế ranh giới CSS cho Web Components bằng inheritance, custom properties, :host, ::slotted, ::part, exportparts và constructable stylesheets có fallback.
-
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 10 — Contract testing và debugging trong browser thật
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.
-
Web Components · Phần 7 — Events, focus và accessibility qua Shadow DOM
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.
-
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 13 — Reactivity, controllers và kiến trúc Lit
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.
-
Web Components · Phần 15 — Capstone: đóng gói và phát hành component library
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.
-
Web Components · Phần 14 — Performance, security, SSR và Declarative Shadow DOM
Đư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.
-
Web Components · Phần 12 — Lit templates, bindings và directives
Đà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.
-
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.