proto.lib

Web Components — Custom Element độc lập framework

Một custom element đăng ký thẻ HTML mới, đóng gói DOM và CSS riêng trong shadow root, và giao tiếp với bên ngoài qua attributes/properties (vào) và custom events (ra) — nhờ vậy design system có thể phân phối component dùng chung cho mọi framework, dù việc nhúng nó vào framework muốn tự quản lý render (như React) đòi hỏi thêm công sức.

ApplicationTrung bình2026-08-26
Web Components — Custom Element độc lập framework

Tags

#web-components#custom-elements#shadow-dom#design-system#framework-agnostic

Tài liệu tham khảo

Mở rộng

Animation gốc là một file HTML tự chứa, có thể nhúng lại ở bất kỳ trang nào khác. Mở file gốc

Liên quan

ApplicationTrung bình

CSS @layer + Nesting: kiểm soát cascade trong design system

@layer định nghĩa thứ tự lớp rõ ràng cho cascade, nên ai thắng phụ thuộc vị trí layer chứ không phải cuộc đua specificity/!important; CSS nesting cho phép viết selector lồng nhau, giảm lặp mà không đổi nghĩa cascade.

#css#cascade-layers#css-nesting#specificity
ApplicationTrung bình

Web Locks API: nhiều tab phối hợp không tranh việc

Web Locks API cho phép nhiều tab của cùng một app xin cùng một khoá tên; chỉ một tab giữ được lock chạy việc như sync dữ liệu hay refresh token, các tab khác chờ hoặc bỏ qua tuỳ chế độ, và lock tự động nhả khi tab đóng hay reload — khác cờ localStorage vốn không tự dọn khi tab crash.

#web-locks#navigator-locks#multi-tab#token-refresh
ApplicationNâng cao

Temporal API: thay thế Date cho thời gian chính xác

Temporal phân biệt rõ Instant (thời điểm tuyệt đối), PlainDate (ngày không múi giờ) và ZonedDateTime (gắn với timezone id); cộng trừ tôn trọng DST, so sánh và format ổn định — vì vậy nên lưu UTC kèm timezone id thay vì lưu offset cố định, vốn sai khi quy tắc DST đổi.

#temporal#date-time#timezone#dst