This content originally appeared on Go Make Things and was authored by Go Make Things
I’m building a Web Component UI library for people who love HTML.
Framework agnostic. Easily customizable. Use with pre-built styles or go “naked” and roll-your-own.
Today, I wanted to talk about what that looks like, and why I think it’s a better approach than other options. Let’s dig in!
Toggle Tabs
To help make this click, we’re going to look at a common-but-complex UI component: toggle tabs.
With this pattern, you have a nav menu that toggles the visibility of some content. Only one piece of content is visible at a time.
Here’s a demo from the W3C Web Accessibility Initiative.
Let’s look at two different but common approaches libraries use to handle this kind of pattern, and talk about why they’re both… lacking.
Approach 1: Hard-coding all-the-things
In a library like Bootstrap, you need to hard-code all of the roles and ARIA directly into your HTML, like this…
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>That’s kind of a lot!
If you have more than one of these, you’ll probably want to rely on some sort of templating system to generate a lot of this for you (server side, JavaScript based, whatever).
And because of how the CSS is structured, only the first tab is visible until JavaScript is downloaded and activated. You’ve got these buttons that are visible but do nothing. If the JS fails for some reason… the user is stuck.
Approach 2: React-like Web Components
The Web Awesome project uses Web Components for pretty much everything. Their tabs look like this…
<wa-tab-group>
<wa-tab panel="general">General</wa-tab>
<wa-tab panel="custom">Custom</wa-tab>
<wa-tab panel="advanced">Advanced</wa-tab>
<wa-tab panel="disabled" disabled>Disabled</wa-tab>
<wa-tab-panel name="general">...</wa-tab-panel>
<wa-tab-panel name="custom">...</wa-tab-panel>
<wa-tab-panel name="advanced">...</wa-tab-panel>
<wa-tab-panel name="disabled">...</wa-tab-panel>
</wa-tab-group>As you can see, this is a lot easier to read and write. And until the Web Component JS loads, all of the content areas are visible.
But the tab controls are these blocks of text that do nothing.
They’re not interactive. They’re not links or a list or labels. They’re just text snippets (<span> elements, as far as the browser is concerned) that seem to have no purpose.
It’s an improvement over the Bootstrap code, but still lacking, in my opinion.
A better approach: HTML Web Components
Imagine if your toggle tabs started off their life as functional HTML—a list of anchor links, and corresponding content—wrapped in a Web Component.
<toggle-tabs>
<ul tabs>
<li><a href="#wizard">Wizard</a></li>
<li><a href="#sorcerer">Sorcerer</a></li>
<li><a href="#druid">Druid</a></li>
</ul>
<div id="wizard">...</div>
<div id="sorcerer">...</div>
<div id="druid">...</div>
</toggle-tabs>You have HTML that’s much easier to write than the Bootstrap version.
Once the Web Component instantiates, it adds all of the required ARIA attributes, roles, and so on, just like the Web Awesome version.
But unlike Web Awesome, the HTML is perfectly functional even if your JS never loads.
HTML is awesome
A lot of libraries approach Web Components with a React mindset, and treat them more like an implementation detail than a feature.
Instead of leaning on HTML to provide a baseline experience, styling it with CSS, and then enhancing it with JS when supported, they use JavaScript for everything.
That works, but it misses out on what makes Web Components so awesome.
I want to build a UI library for people who love HTML.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-04-21T14:30:00+00:00) A Web Component UI library for people who love HTML. Retrieved from https://www.scien.cx/2025/04/21/a-web-component-ui-library-for-people-who-love-html/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.