![devtools: how to query through the shadow DOM [blog]](https://allblogs.blob.core.windows.net/alldevblogs/thumbs/article-6b1940cb9855-full-bbdfa2ec.webp)
Learn about the $$$ function in devtools to query through the shadow DOM for easier debugging and element selection.
Using data-* attributes to expose internal state for stable, declarative testing of web components, avoiding brittle shadow DOM selectors.
A developer discovers a consistent bug in how browser DevTools interpret Shadow DOM CSS specificity, particularly with the :host selector and !important rules.
A guide to resolving compatibility issues between HTMX and Shoelace web components, with a focus on Shadow DOM and event handling.
A technical guide on using CSS @property within Lit web components, including a workaround for shadow DOM limitations.
A technical guide on how to select and control running/paused Web Animations API (WAAPI) animations within Lit web components.
Exploring the creation of a web component for star ratings, comparing approaches to HTML's <meter> element and addressing styling and editability.
Exploring the best HTML and ARIA patterns for accessible button groups, comparing radio buttons vs. buttons with aria-pressed based on expert advice.
A developer shares their experience and challenges creating their first reusable web component for a native sharing button.
A developer's journey of yak shaving leads to creating <md-block>, a new HTML web component for rendering Markdown content.
A technical guide demonstrating how to use the new CSS Container Queries feature within Web Components, including a live bookstore demo.
A developer shares common pitfalls and workarounds when building web components, focusing on DOM structure and semantic HTML.
A tutorial on styling Web Components using external stylesheets, style tags, CSS parts, and slots for encapsulated UI development.
A tutorial on creating basic Web Components, covering setup, Hello World examples, and using ShadowDOM for encapsulation.
![Web Components Tutorial for Beginners [2019]](https://alldevblogs.blob.core.windows.net/thumbs/article-65ab5c46ab59-full-406defbc.webp)
A beginner tutorial on building reusable Web Components (Custom Elements) with HTML, CSS, and JavaScript, featuring a dropdown example.
Lists which HTML elements can and cannot have a Shadow DOM attached, with examples and exceptions for Web Components.
Explains the Shadow DOM, a web technology for creating isolated, encapsulated DOM trees with their own elements and styles.
Explains why jQuery plugins fail inside Shadow DOM due to DOM encapsulation and offers troubleshooting advice.
A response to criticisms of Web Components, arguing they are maturing and can coexist with frameworks like React.
A monthly roundup of browser updates, developer tools, and web platform changes, including Opera Mini beta, Firefox Developer Edition, and debugging techniques.
