| Getting Oriented With HTML Video (by/via) | | 103 |
| html, multimedia |
| Declarative Shadow DOM (by/via) | | 102 |
| shadow-dom, dom |
| React 19 and Web Component Examples (by/via) | | 101 |
| react, examples |
| The Pixel Canvas Shimmer Effect (by) | | 100 |
| effects |
| Making Content-Aware Components Using CSS “:has()”, Grid, and Quantity Queries (by/via) | | 99 |
| css, grids, selectors |
| Where Web Components Shine (by) | | 98 |
|
| Styling Web Components (by) | | 97 |
| css |
| How Microsoft Edge Is Replacing React With Web Components (by/via) | | 96 |
| edge, microsoft, browsers, react |
| Liskov’s Gun: The Parallel Evolution of React and Web Components (by) | | 95 |
| react, comparisons |
| Web Components: Little Bits (by/via) | | 94 |
| videos, html |
| Web Components Are Not Framework Components—and That’s Okay (by) | | 93 |
| web-platform, frameworks |
| Web Components vs. State-Based UI (by) | | 92 |
| state-management, comparisons |
| Web Components Are Okay (by) | | 91 |
|
| Web Components Are Not the Future (by) | | 90 |
| web-platform, frameworks |
| Web Components in Action—How to Build a Design System (by) | | 89 |
| how-tos, design-systems |
| A Web Component for CodePen Embeds? (by) | | 88 |
| embed-code, codepen |
| Spoiler Alert: It Needs to Be Accessible (by) | | 87 |
| accessibility, html, aria |
| Action Web Components Which Span the Server-Client Divide (by) | | 86 |
| html, apis |
| HTML Web Components Can Have a Little Shadow DOM, as a Treat (by) | | 85 |
| html, shadow-dom, dom |
| HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier (by/via) | | 84 |
| html, principles, solid, progressive-enhancement, examples |
| Is It Okay to Make “connectedCallback” Async? (by) | | 83 |
| javascript, callbacks, asynchronicity |
| Learn Web Components (by) | | 82 |
| websites, courses, html, css, dom, javascript |
| Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (by) | | 81 |
| css, selectors |
| Are Web Components Worth It? (by+) | | 80 |
| podcasts, html, dom, shadow-dom |
| The Case for Web Components (by) | | 79 |
| books |
| Live Demos of Stand Alone Web Components (by/via) | | 78 |
| examples, link-lists |
| Reflection and Custom States in Web Components (by) | | 77 |
| html |
| When Should We Use Components and When Should We Just Use HTML? (by) | | 76 |
| html, components |
| Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers (by/via) | | 75 |
| javascript, events |
| Why Use Web Components Over Traditional DOM Manipulation? (by) | | 74 |
| dom |
| The Carcinization of Web Frameworks (by/via) | | 73 |
| frameworks, history, signals, server-side-rendering, visions |
| Web Components From Early 2024 (by) | | 72 |
| link-lists |
| My Approach to HTML Web Components (by) | | 71 |
| html |
| Displaying HTML Web Components (by) | | 70 |
| css |
| “AI” and Accessible Front-End Components: Is the Nuance Generatable? (by) | | 69 |
| accessibility, ai |
| Getting Into Web Components—an Intro (by) | | 68 |
| introductions |
| The Good, the Bad, the Web Components (by) | | 67 |
| shadow-dom, dom |
| The Web Component Success Story (by) | | 66 |
|
| HTML Web Components on the Server Are Great (by) | | 65 |
| html |
| On Web Components (by) | | 64 |
|
| Web Components in Earnest (by) | | 63 |
| javascript |
| Web Component Gotcha: “constructor” vs. “connectedCallback” (by) | | 62 |
| javascript, callbacks, comparisons |
| Not All Automated Testing Tools Support Shadow DOM in Web Components (by) | | 61 |
| accessibility, testing, automation, tooling, shadow-dom, dom |
| Shadow DOM and the Problem of Encapsulation (by) | | 60 |
| shadow-dom, dom, maintainability |
| Web Components (by/via) | | 59 |
| html, shadow-dom, dom |
| Extending Responsive Video With HTML Web Components (by/via) | | 58 |
| multimedia, responsive-design, javascript |
| What the Slot? (by/via) | | 57 |
| dom, shadow-dom, html |
| Custom Events in Web Components (by) | | 56 |
| events, javascript |
| Web Components Eliminate JavaScript Framework Lock-In (by) | | 55 |
| javascript, frameworks, maintainability |
| The Elevator Pitch for Web Components (by) | | 54 |
| html, dom |
| Shadow DOM Is for Hiding Your Shame (by) | | 53 |
| shadow-dom, dom, html |
| An Attempted Taxonomy of Web Components (by) | | 52 |
| html |
| HTML Web Components Are Just JavaScript? (by/via) | | 51 |
| javascript, html |
| HTML Web Components (by) | | 50 |
| html |
| HTML Web Components (by) | | 49 |
| html, web-platform |
| Writing Components That Work in Any Frontend Framework (by) | | 48 |
| frameworks |
| Blinded by the Light DOM (by) | | 47 |
| dom, shadow-dom, javascript |
| Web Components Will Outlive Your JavaScript Framework (by) | | 46 |
| javascript, frameworks |
| An Introduction to Web Components (by) | | 45 |
| introductions |
| Accessible Web Components? (by/via) | | 44 |
| videos, accessibility |
| Web Components Accessibility FAQ (by) | | 43 |
| accessibility |
| Web Components Don’t Need You (by/via) | | 42 |
|
| Catching Errors Thrown From “connectedCallback” (by) | | 41 |
| javascript, errors |
| Use Web Components for What They’re Good At (by) | | 40 |
|
| Pros and Cons of Using Shadow DOM and Style Encapsulation (by) | | 39 |
| dom, shadow-dom |
| Enhance vs. Lit vs. WebC… or, How to Server-Render a Web Component (by/via) | | 38 |
| server-side-rendering, webc |
| If Web Components Are So Great, Why Am I Not Using Them? (by) | | 37 |
|
| And 4 More HTML Concepts You Didn’t Know (by) | | 36 |
| html, concepts |
| A Web Component Intro With Example | | 35 |
| introductions, examples |
| 11ty and Lit, a Match Made in Heaven for Simple Sites | | 34 |
| eleventy |
| 3 Methods for Scoped Styles in Web Components That Work Everywhere (by) | | 33 |
| css, scope, dom, shadow-dom, support |
| Progressively Enhancing a Table With a Web Component (by) | | 32 |
| html, javascript, tables, progressive-enhancement |
| An Approach to Lazy Loading Custom Elements (via) | | 31 |
| performance, lazy-loading |
| HTML With Superpowers: An Introduction to Web Components (by) | | 30 |
| books, courses, guides, introductions |
| Step Into the Light (DOM) (by) | | 29 |
| dom, progressive-enhancement |
| Web Components Today (by) | | 28 |
| websites |
| Let’s Talk About Web Components (by) | | 27 |
|
| Using Web Components With Next (or Any SSR Framework) (by/via) | | 26 |
| nextjs, server-side-rendering |
| A Web Component Story (by) | | 25 |
| design-systems |
| Building a Retro Draggable Web Component With Lit (by/via) | | 24 |
| javascript |
| Building Tabs in Web Components (by) | | 23 |
|
| Building Interoperable Web Components That Even Work With React (by/via) | | 22 |
| interoperability, react |
| CTA Modal: How to Build a Web Component (by/via) | | 21 |
| how-tos, javascript, modals |
| Build a Lightweight Web Component With Lit.js (by/via) | | 20 |
| javascript |
| Web Components as Progressive Enhancement (by/via) | | 19 |
| progressive-enhancement |
| 7 Web Component Tricks (by) | | 18 |
| tips-and-tricks |
| Creating Native Web Components (via) | | 17 |
| javascript, html |
| Web Component Pseudo-Classes and Pseudo-Elements Are Easier Than You Think (by/via) | | 16 |
| html, css |
| Context-Aware Web Components Are Easier Than You Think (by/via) | | 15 |
| html, javascript |
| On Yak Shaving and “<md-block>”, a New HTML Element for Markdown (by) | | 14 |
| html, markdown |
| Why It’s Okay for Web Components to Use Frameworks (by) | | 13 |
| frameworks |
| An Introduction to Frameworkless Web Components (by/via) | | 12 |
| introductions, javascript, dom |
| Container Queries in Web Components (by) | | 11 |
| css, container-queries |
| How to Create a Native Web Component Without a Framework (by/via) | | 10 |
| how-tos, javascript |
| Web Components and the Accessibility Object Model (AOM) (by/via) | | 9 |
| accessibility |
| Web Components Still Need to Be Accessible (by/via) | | 8 |
| accessibility, toggles |
| Extending Built-In Elements (by) | | 7 |
| shadow-dom, dom, javascript |
| Styling Web Components Using a Shared Style Sheet (by/via) | | 6 |
| css |
| Custom Elements No Longer Contentious (by) | | 5 |
|
| DOM: Custom Elements (by) | | 4 |
| dom |
| Thinking in Components (by/via) | | 3 |
| components |
| Web 2024—a Response to Robin Berjon’s Post (by) | | 2 |
| web, visions, javascript, w3c, web-workers, interoperability, servo |
| The Extensible Web (by) | | 1 |
| web-platform, extensibility, shadow-dom, multimedia, ecmascript |
