| The Problem With Web Components | | 128 |
|
| A Web Component UI Library for People Who Love HTML (cfe) | | 127 |
| libraries |
| The Case for Web Components With Lit | | 126 |
| lit, typescript, micro-frontends |
| Web Components vs. Framework Components: What’s the Difference? (sma) | | 125 |
| components, frameworks, html, comparisons |
| JavaScript (htt) | | 124 |
| web-almanac, studies, research, metrics, javascript, performance, bundling, transpiling, web-workers, libraries |
| Documenting Web Components With Storybook | | 123 |
| documentation, design-systems, storybook, examples |
| A Color Input That Also Shows the Value (chr/fro) | | 122 |
| forms, colors |
| Web Components Toolkit (stu) | | 121 |
| websites |
| Getting Oriented With HTML Video (sco/mat) | | 120 |
| html, multimedia |
| Declarative Shadow DOM (sch/5t3) | | 119 |
| shadow-dom, dom |
| React 19 and Web Component Examples (chr/fro) | | 118 |
| react, examples |
| The Pixel Canvas Shimmer Effect (hex) | | 117 |
| effects |
| Making Content-Aware Components Using CSS “:has()”, Grid, and Quantity Queries (eri/pic) | | 116 |
| css, grids, selectors |
| Where Web Components Shine (dav) | | 115 |
|
| Styling Web Components (cfe) | | 114 |
| css |
| How Microsoft Edge Is Replacing React With Web Components (ric/the) | | 113 |
| edge, microsoft, browsers, react |
| Liskov’s Gun: The Parallel Evolution of React and Web Components (bal) | | 112 |
| react, comparisons |
| Web Components: Little Bits (web) | | 111 |
| videos, html |
| Web Components vs. State-Based UI (cfe) | | 110 |
| state-management, comparisons |
| Web Components Are Not Framework Components—and That’s Okay (lea) | | 109 |
| web-platform, frameworks |
| Web Components Are Okay (nol) | | 108 |
|
| Web Components Are Not the Future (rya) | | 107 |
| web-platform, frameworks |
| Web Components in Action—How to Build a Design System | | 106 |
| how-tos, design-systems |
| A Web Component for CodePen Embeds? (mia) | | 105 |
| embed-code, codepen |
| Spoiler Alert: It Needs to Be Accessible (sco) | | 104 |
| accessibility, html, aria |
| Action Web Components Which Span the Server-Client Divide (jar) | | 103 |
| html, apis |
| HTML Web Components Can Have a Little Shadow DOM, as a Treat (sco) | | 102 |
| html, shadow-dom, dom |
| HTML Web Components Make Progressive Enhancement and CSS Encapsulation Easier (css) | | 101 |
| html, principles, solid, progressive-enhancement, examples |
| Is It Okay to Make “connectedCallback” Async? (nol) | | 100 |
| javascript, callbacks, asynchronicity |
| Learn Web Components (and) | | 99 |
| websites, courses, html, css, dom, javascript |
| Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (and) | | 98 |
| css, selectors |
| Are Web Components Worth It? | | 97 |
| podcasts, html, dom, shadow-dom |
| The Case for Web Components (dav) | | 96 |
| books |
| Live Demos of Stand Alone Web Components (chr/fro) | | 95 |
| examples, link-lists |
| Reflection and Custom States in Web Components (cla) | | 94 |
| html |
| When Should We Use Components and When Should We Just Use HTML? (chr) | | 93 |
| html, components |
| Why Use Web Components Over Traditional DOM Manipulation? (cfe) | | 92 |
| dom |
| Five Basic Things About JavaScript That Will Help Non JavaScript-Focused Web Designers (chr/fro) | | 91 |
| javascript, events |
| The Carcinization of Web Frameworks | | 90 |
| frameworks, history, signals, server-side-rendering, outlooks |
| Web Components From Early 2024 (chr) | | 89 |
| link-lists |
| My Approach to HTML Web Components (ada) | | 88 |
| html |
| Displaying HTML Web Components (ada) | | 87 |
| css |
| “AI” and Accessible Front-End Components: Is the Nuance Generatable? (hdv) | | 86 |
| accessibility, ai |
| Getting Into Web Components—an Intro (uti) | | 85 |
| introductions |
| The Good, the Bad, the Web Components (zac) | | 84 |
| shadow-dom, dom |
| The Web Component Success Story (jak) | | 83 |
|
| HTML Web Components on the Server Are Great (sco) | | 82 |
| html |
| Web Components in Earnest (dav) | | 81 |
| javascript |
| On Web Components (tmc) | | 80 |
|
| Web Component Gotcha: “constructor” vs. “connectedCallback” (nol) | | 79 |
| javascript, callbacks, comparisons |
| Why I Like Web Components | | 78 |
| html |
| Not All Automated Testing Tools Support Shadow DOM in Web Components (mat) | | 77 |
| accessibility, testing, automation, tooling, shadow-dom, dom |
| Shadow DOM and the Problem of Encapsulation (nol) | | 76 |
| shadow-dom, dom, maintainability |
| Web Components (may/5t3) | | 75 |
| html, shadow-dom, dom |
| Extending Responsive Video With HTML Web Components (sco) | | 74 |
| multimedia, responsive-design, javascript |
| What the Slot? (dut/mat) | | 73 |
| dom, shadow-dom, html |
| Custom Events in Web Components (cfe) | | 72 |
| events, javascript |
| Web Components Eliminate JavaScript Framework Lock-In (jak) | | 71 |
| javascript, frameworks, maintainability |
| Shadow DOM Is for Hiding Your Shame | | 70 |
| shadow-dom, dom, html |
| The Elevator Pitch for Web Components (cfe) | | 69 |
| html, dom |
| An Attempted Taxonomy of Web Components (zac) | | 68 |
| html |
| HTML Web Components Are Just JavaScript? (mia/odd) | | 67 |
| javascript, html |
| HTML Web Components (jim) | | 66 |
| html |
| HTML Web Components (ada) | | 65 |
| html, web-platform |
| Writing Components That Work in Any Frontend Framework (and) | | 64 |
| frameworks |
| Blinded by the Light DOM (mey) | | 63 |
| dom, shadow-dom, javascript |
| Web Components Will Outlive Your JavaScript Framework (jak) | | 62 |
| javascript, frameworks |
| How to Build Your First Web Component (joe/fre) | | 61 |
| how-tos |
| An Introduction to Web Components (ami) | | 60 |
| introductions |
| Accessible Web Components? (mat/inc) | | 59 |
| videos, accessibility |
| Web Components Accessibility FAQ (mat) | | 58 |
| accessibility |
| Web Components Don’t Need You (chr/cod) | | 57 |
|
| Catching Errors Thrown From “connectedCallback” (nol) | | 56 |
| javascript, errors |
| Use Web Components for What They’re Good At (nol) | | 55 |
|
| Pros and Cons of Using Shadow DOM and Style Encapsulation (mat) | | 54 |
| dom, shadow-dom |
| Enhance vs. Lit vs. WebC… or, How to Server-Render a Web Component (jar/van) | | 53 |
| server-side-rendering, lit, webc |
| If Web Components Are So Great, Why Am I Not Using Them? (dav) | | 52 |
|
| And 4 More HTML Concepts You Didn’t Know (j9t) | | 51 |
| html, concepts |
| A Web Component Intro With Example | | 50 |
| introductions, examples |
| 11ty and Lit, a Match Made in Heaven for Simple Sites | | 49 |
| eleventy, lit |
| 3 Methods for Scoped Styles in Web Components That Work Everywhere (zac) | | 48 |
| css, scope, dom, shadow-dom, support |
| Progressively Enhancing a Table With a Web Component (ray) | | 47 |
| html, javascript, tables, progressive-enhancement |
| An Approach to Lazy Loading Custom Elements (css) | | 46 |
| performance, lazy-loading |
| HTML With Superpowers: An Introduction to Web Components (dav) | | 45 |
| books, courses, guides, introductions |
| Step Into the Light (DOM) (aaa) | | 44 |
| dom, progressive-enhancement |
| Web Components Today (kul) | | 43 |
| websites |
| Let’s Talk About Web Components (bra) | | 42 |
|
| Using Web Components With Next (or Any SSR Framework) (ada/css) | | 41 |
| nextjs, server-side-rendering |
| A Web Component Story | | 40 |
| design-systems |
| Building a Retro Draggable Web Component With Lit (and/sma) | | 39 |
| javascript |
| Building Tabs in Web Components | | 38 |
|
| Building Interoperable Web Components That Even Work With React (ada/css) | | 37 |
| interoperability, react |
| CTA Modal: How to Build a Web Component (sma) | | 36 |
| how-tos, javascript, modals |
| Build a Lightweight Web Component With Lit.js | | 35 |
| javascript |
| Web Components as Progressive Enhancement (pau/clo) | | 34 |
| progressive-enhancement |
| 7 Web Component Tricks (dav) | | 33 |
| tips-and-tricks |
| Creating Native Web Components (cod) | | 32 |
| javascript, html |
| Web Component Pseudo-Classes and Pseudo-Elements Are Easier Than You Think (css) | | 31 |
| html, css |
| Context-Aware Web Components Are Easier Than You Think (css) | | 30 |
| html, javascript |
| On Yak Shaving and “<md-block>”, a New HTML Element for Markdown (lea) | | 29 |
| html, markdown |
| Why It’s Okay for Web Components to Use Frameworks (nol) | | 28 |
| frameworks |
| An Introduction to Frameworkless Web Components (cra) | | 27 |
| introductions, javascript, dom |
| Container Queries in Web Components | | 26 |
| css, container-queries |
| Goodnight Polymer Project | | 25 |
| polymer, lit |
| Minimal Takes on Faking Container Queries (chr/css) | | 24 |
| container-queries, javascript, css |
| A Bit on Web Component Libraries (chr/css) | | 23 |
| pattern-libraries |
| How to Create a Native Web Component Without a Framework | | 22 |
| how-tos, javascript |
| The Web in 2020: Extensibility and Interoperability (una/css) | | 21 |
| web-platform, extensibility, interoperability, houdini, variable-fonts, custom-properties, logical-properties, media-queries, performance |
| Thinking Through Styling Options for Web Components (chr/css) | | 20 |
| css |
| A Web Component With Different HTML for Desktop and Mobile (chr/css) | | 19 |
| html, mobile, desktop |
| Web Components and the Accessibility Object Model (AOM) (tin/24a) | | 18 |
| accessibility |
| Making Web Components for Different Contexts (equ/css) | | 17 |
| accessibility |
| Advanced Tooling for Web Components (css) | | 16 |
| angular, vuejs, react, tooling |
| An Introduction to Web Components (css) | | 15 |
| introductions, javascript, shadow-dom, html |
| Styling a Web Component (chr/css) | | 14 |
| shadow-dom, dom, custom-properties, css, html |
| Web Components Still Need to Be Accessible (eri/24a) | | 13 |
| accessibility, toggles |
| Extending Built-In Elements | | 12 |
| shadow-dom, dom, javascript |
| Custom Elements v1—Reusable Web Components (dev) | | 11 |
| html, maintainability, shadow-dom, dom, examples |
| Styling Web Components Using a Shared Style Sheet (ste/sma) | | 10 |
| css |
| Shadow DOM v1—Self-Contained Web Components (dev) | | 9 |
| shadow-dom, dom |
| Custom Elements No Longer Contentious (ann) | | 8 |
|
| Google Releases Polymer 1.0, a Library for the Modern Web Developer (cam/sof) | | 7 |
| google, libraries, polymer |
| DOM: Custom Elements (ann) | | 6 |
| dom |
| Thinking in Components | | 5 |
| components |
| Web 2024—a Response to Robin Berjon’s Post (mar) | | 4 |
| web, outlooks, javascript, w3c, web-workers, interoperability, servo |
| A Guide to Web Components (css) | | 3 |
| guides, examples |
| The Extensible Web (dom) | | 2 |
| web-platform, extensibility, shadow-dom, multimedia, ecmascript |
| Polymer | | 1 |
| websites, polymer |
