#web-components

Prop For That

Thư viện Prop For That của Adam Argyle cung cấp các CSS custom properties động, cho phép truy cập vào những thuộc tính CSS thông thường không thể truy xuất như vị trí con trỏ, tốc độ cuộn, trạng thái form hay thời gian hiện tại. Nhà phát triển chỉ cần thêm thuộc tính data vào HTML, sau đó sử dụng trực tiếp các biến CSS này trong stylesheet mà không cần viết JavaScript.

Lập trình viên nên đọc bài này để khám phá cách Prop For That giúp tối ưu hóa giao diện người dùng bằng cách kết nối trực tiếp CSS với dữ liệu động từ HTML mà không cần JavaScript, mở rộng khả năng tùy biến UI một cách đơn giản và hiệu quả.

Alchemy 8.3 released

AlchemyCMS 8.3 has been released with a completely redesigned admin dashboard featuring configurable, lazy-loaded widgets. New wildcard URL support allows dynamic content routing via URL pattern matching. The release also replaces the custom select web component with Tom Select (removing a jQuery dependency), updates TinyMCE to 8.6.0, adds automatic element cache invalidation on related object changes, and includes several developer ergonomics improvements. Breaking changes include removal of the AlchemyHTMLElement base class and soft-removal of Ruby 3.2 from the test matrix. Upgrading requires bumping the gem version and running the built-in upgrader.

Issue #747: CSS that picks its own readable text color — Frontend Focus

Frontend Focus issue #747 covers CSS techniques for readable text color selection, Astro 7.0's release with a Rust-powered compiler and 15–61% faster builds, Mozilla's PACT proposal for privacy-preserving bot rate-limiting, accessibility pitfalls of CSS Grid Lanes and WCAG 2.4.3 compliance, animating the dialog element with View Transitions API, AI coding agents' poor accessibility output, and several tools including a lightweight Web Component framework, an accessible HTML5 media player, and a browser fingerprinting demo page.

Embeddable Widgets with Vite, React, Tailwind 4 & Web Components

A practical walkthrough of building embeddable widgets using React, Tailwind 4, Vite, and Web Components delivered as a single JS file. Two significant browser limitations are uncovered and solved: Tailwind 4's heavy reliance on CSS @property rules which Shadow DOM doesn't fully support, and @font-face declarations not working inside Shadow Roots. The @property issue is addressed with a custom PostCSS plugin (~300 lines) that transforms Tailwind's property registrations into concrete CSS variable declarations scoped to the shadow host. The font issue is handled by a runtime font loader using the FontFace API that attaches fonts to the parent document instead of the Shadow Root.