Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s oppression and killing of Palestinians and the occupation and destruction of Palestine (history) 🇵🇸 Hide

Frontend Dogma

“web-components” News Archive

Definition, related topics, and tag feed

Definition · Supertopics: components, html · Subtopics: lit, polymer (non-exhaustive) · “web-components” RSS feed (per email)

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