Skip to content
Standard Reader
Log in
Tag

Web Components

Articles and publications tagged Web Components across the Atmosphere.

27articles4publications
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookOct 12, 2026
Sortable Tables with Progressive Enhancement
My table-sortable web component adds accessible, customizable sorting to ordinary HTML tables while keeping their core structure and semantics intact.
web componentsprogressive enhancement
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookOct 7, 2026
Tabbed Interface: The Web Component
I’ve been building tabbed interfaces from document headings since 2007. My new custom element carries that approach forward and now drops the tabs when they don’t fit.
web componentsprogressive enhancement
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookMay 25, 2026
Easy Data-entry Verification with a Web Component
Confirming values like email addresses and passwords is a common form need. The `form-matching-fields` web component injects the necessary validation without stomping on browser-native validation using `required`, `pattern`, and such.
accessibilityforms
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookApr 22, 2026
Visual Validation Feedback for Form Fields
The `form-validation-list` web component provides real-time visual feedback on validation requirements, showing users which rules they have satisfied as they type.
web componentsprogressive enhancement
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookApr 20, 2026
Never Lose Form Progress Again
Browsers crash. Tabs close. Life happens. Here’s a web component that saves form progress so your users don’t have to start over from scratch.
web componentsforms
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookJan 31, 2026
Repeatable Form Fields Made Simple
Need to let users add multiple email addresses, phone numbers, or other field groups? The `form-repeatable` web component handles the duplication, renumbering, and form submission automatically.
formsHTML
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookJan 2, 2026
A Production-Ready Web Component Starter Template
I created a comprehensive starter template for creating production-ready web components with modern tooling, testing, and CI/CD—following Google’s Custom Element Best Practices.
web componentsJavaScript
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookDec 29, 2025
Fullscreen Video and Iframes Made Easy
The fullscreen-control web component adds fullscreen capabilities to any video or iframe element with a single wrapper and zero configuration.
web componentsprogressive enhancement
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookDec 16, 2025
Dynamic Datalist: Autocomplete from an API
The `datalist` element is great for autocomplete, but it’s static. The `dynamic-datalist` web component brings dynamic, API-driven suggestions to your text fields as users type.
formsHTML
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookDec 10, 2025
Lazy Loading Images Based on Screen Size
The lazy-img web component goes beyond native lazy loading and srcset—it can completely skip loading images on small screens, saving bandwidth where it matters most.
web componentsprogressive enhancement
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookDec 6, 2025
A Web Component for Obfuscating Form Fields
There’s no standard way to make a field readable while editing but obfuscated at rest. The `form-obfuscator` web component fills that gap, giving you control over how sensitive data appears when fields aren’t focused.
formsHTML
Ryosuke's Sketchbook
Ryosuke's SketchbookOct 31, 2025
Static site generation with Web Components
web componentsreact
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookOct 20, 2025
A Web Component for Conditionally Displaying Fields
Sometimes you only want a field to show when certain other fields have a (particular) value. The `form-show-if` web component enables that.
web componentsweb forms
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookAug 14, 2024
A Web Component for Conditional Dependent Fields
Sometimes you need to require a value in one form field only if another field is filled in or if that field has a specific value. I ported an old jQuery plugin of mine that made this work to a web component you can use easily right now.
formsHTML
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookJul 5, 2024
Requirement Rules for Checkboxes
Currently, we can only make checkboxes required or not, individually. In some cases you need to be able to set a specific number of checkboxes that need to be checked. My `form-required-checkboxes` web component enables that.
accessibilityforms
Cory Dransfeldt
Cory DransfeldtFeb 27, 2024
Building a theme toggle web component
I (very recently!) added a theme toggle to my site, right up there in the menu. It's a shiny sun or a purple moon depending on your preference. It was a liquid template with some JavaScript sprinkled in. I turned that into a web component.
csseleventy
Aaron Gustafson’s Notebook
Aaron Gustafson’s NotebookMar 6, 2023
A Tab Interface Before Its Time
It’s cool to see ideas I was playing with over a dozen years ago starting to make it into new markup constructs.
HTMLweb components
blog.damato.design
blog.damato.designApr 12, 2022
Fetching web component definitions
Passively requesting code once an element is discovered on a page.
componentsweb components
Ryosuke's Sketchbook
Ryosuke's SketchbookJun 29, 2020
Sharing Hooks Between React and Web Components
web componentsreact
Ryosuke's Sketchbook
Ryosuke's SketchbookJun 23, 2020
Adding Constructable Stylesheets to HauntedJS
hauntedjsreact
Ryosuke's Sketchbook
Ryosuke's SketchbookJun 22, 2020
Using Web Components with Gatsby and Preact
gatsbyreact
Ryosuke's Sketchbook
Ryosuke's SketchbookMar 10, 2020
Creating a Blog or Docs using Web Components
markdownweb components
Ryosuke's Sketchbook
Ryosuke's SketchbookFeb 26, 2020
Utility Props for Web Components
design systemsweb components
Ryosuke's Sketchbook
Ryosuke's SketchbookJan 29, 2020
Creating a Design System using Web Components
design systemsweb components