MicroLighter is a tiny client-side syntax highlighter using CSS Custom Highlights API, with on-demand Textmate grammars and light-dark themes.
A web developer discusses solving CSS @layer ordering issues for web components by using a shadow-piercing technique to style local component variables from global stylesheets.
![Wildcards In CSS [blog]](https://crawljobs-blogs-media.s3.us-east-1.amazonaws.com/alldevblogs/thumbs/article-093c0fd6db67-full-9f6c04e0.webp)
Explores the idea of adding wildcard selectors for elements in CSS, like `mdn-*`, and compares with existing attribute selectors.
![Under the hood of MDN's new frontend [link]](https://crawljobs-blogs-media.s3.us-east-1.amazonaws.com/alldevblogs/thumbs/article-4970311967ff-full-d8c212a5.webp)
MDN's frontend rebuild from React to Web Components, focusing on progressive enhancement and auto-loaded modules.
A CSS workaround using @scope to hide empty slots in Chromium web components, solving the ghost gap issue.
A blogger updates their digital garden with new guides on Web Components, testing, Playwright, and more, while planning future improvements.
Learn to detect element visibility changes with JavaScript IntersectionObserver API for responsive web components.
A technical exploration of styling the native HTML <dialog> element to function as a fly-out sidebar, overriding default browser styles.
Introduces a polyfill for the new native HTML switch element, enabling cross-browser support with accessibility features.
Explains the correct usage of the 'super' keyword in JavaScript custom elements, clarifying common misconceptions about constructor calls and inheritance.
A technical guide on dynamically loading and defining custom web elements using JavaScript, focusing on naming conventions and modular architecture.
![FFConf 2025 [blog]](https://crawljobs-blogs-media.s3.us-east-1.amazonaws.com/alldevblogs/thumbs/article-0b185026a48f-full-8555744b.webp)
A personal reflection on the talks and themes at FFConf 2025, covering diversity, privacy, web components, and AI in web development.
Using data-* attributes to expose internal state for stable, declarative testing of web components, avoiding brittle shadow DOM selectors.
A satirical guide to simulating AI text generation using Web Components and CSS animations, without actual AI.
![Syntax Highlighting in Web Component Templates [blog]](https://crawljobs-blogs-media.s3.us-east-1.amazonaws.com/alldevblogs/thumbs/article-cc25aac40488-full-b7094e36.webp)
A guide to enabling syntax highlighting and Prettier formatting for HTML templates inside JavaScript web components using a specific VS Code comment.
A technical guide on implementing a copy-to-clipboard button using Web Awesome and Eleventy, covering bundling and progressive enhancement.
A developer rants about building accessible web components while creating open-source components to display Bluesky likes using its open API.
A developer discovers a consistent bug in how browser DevTools interpret Shadow DOM CSS specificity, particularly with the :host selector and !important rules.
A developer details a Firefox bug where custom elements lose their prototype when moved to an iframe and provides a workaround fix.
Introducing style-observer, a JavaScript library to detect and respond to CSS property changes, including custom properties.
