I’m about to dive into custom HTML tags/elements and web components. Any recommendations for standards, posts or articles to read before I embark on this “journey”?
#webdev #webdesign #webcomponents
Administered by:
#webcomponents
9 posts9 participants0 posts today
“The second the browser hits that `<table-of-contents>` component, the JavaScript for it executes. It does this before it’s even loaded the child elements inside the component.”
I’ve run into this at least once before, and I’m sure this is a better solution than whatever hack I implemented at the time.
(via Jeremy Keith)
gomakethings.comBulletproof web component loadingToday, I wanted to talk about the “right” way to load web components to ensure they work predictably every time. Let’s dig in!
The challenge Web components are self instantiating.
Let’s imagine you’re creating a table of contents. When you use a traditional JavaScript library, you explicitly instantiate the library on a specific element.
<div id="toc"></div>const myTOC = new TableOfContents('#toc'); But with web components, all you need to do is include the custom element associated with the component.
New blog post: A short glimpse into web components and Lit
https://rivea0.github.io/blog/a-short-glimpse-into-web-components-and-lit
Come to think of it, maybe not so short.
Eda ErenA short glimpse into web components and LitAn exploration into the basics of web components and the Lit framework
Received some feedback from a team using the Custom Element library for an Enterprise Design System I've been working on. Some cross-component lifecycle adjustments were necessary to enhance React compatibility. The nice part was that they also mentioned their (React 19) application was much faster with custom elements, both perceptually and measurably (using Lighthouse).
#Development #Guides
Public CSS variables in the shadow DOM · How to expose them in web components https://ilo.im/165h87
_____
#CustomProperties #WebComponents #ShadowDOM #API #Accessibility #WebDev #Frontend #CSS #JavaScript
In-between adding keyboard navigation features I started to implement drag and drop for this tree web component.
CSS Variables on these recursive web components cuts down a lot of JS.
After a long while tinkering with smaller and smaller ways to build re-usable pieces of HTML, I've landed on something that is simple, and uses the browsers built-in abilities to upgrade elements.
Introducing "ShadowRoot Injector" 
https://github.com/Tram-One/shadowroot-injector
ShadowRoot Injector is a way to declaratively define HTML, that will automatically insert when custom elements appear in the DOM. 
Check out the link and examples, and let me know what y'all think!
#WebComponents #HTML #ShadowDOM #WebDev
GitHubGitHub - Tram-One/shadowroot-injector: 🪡 declaratively define shadowroots to repeat in HTML templates🪡 declaratively define shadowroots to repeat in HTML templates - Tram-One/shadowroot-injector
Replied in thread
@judell hey, this is very interesting. The old VB UI in a new web jacket. I just tooted about the Rube Goldberg machine that is modern web dev, and in some ways I was more empowered at the start of my career in 1997 with Visual Basic.
https://social.coop/@smallcircles/114878688112419149
You might have a look if maybe there isn't a cool combination to make with #Datastar at https://data-star.dev which recently went v1.0
They continue where #HTMX stopped, in #hypermedia land, where they use #WebComponents for complex UI.
social.coopjust small circles 🕊 (@smallcircles@social.coop)The Rube Goldberg machine that is modern front-end development. "Make simple things complex again".
I have AstroJS/Starlight documentation site. It works. But hey, new versions everywhere in the deps tree. Gotta incorporate brand new incompatible Tailwind v4 config.
Simple change, just follow the docs, right?
Wrong. Dark mode no longer works and it is a mystery why. Need to go expert mode, delve in multiple issue trackers, code bases. A day passes..
On dark mode default feature being broken.
#Development #Techniques
Bulletproof web component loading · How to ensure they work predictably every time. https://ilo.im/1658l1
_____
#Reliability #Initialization #WebComponents #WebDev #Frontend #DOM #HTML #JavaScript
ilo.imBulletproof web component loadingToday, I wanted to talk about the “right” way to load web components to ensure they work predictably every time. Let’s dig in!
The challenge Web components are self instantiating.
Let’s imagine you’re creating a table of contents. When you use a traditional JavaScript library, you explicitly instantiate the library on a specific element.
<div id="toc"></div>const myTOC = new TableOfContents('#toc'); But with web components, all you need to do is include the custom element associated with the component.
Bulletproof Web Component Loading, by @cferdinandi:
gomakethings.comBulletproof web component loadingToday, I wanted to talk about the “right” way to load web components to ensure they work predictably every time. Let’s dig in!
The challenge Web components are self instantiating.
Let’s imagine you’re creating a table of contents. When you use a traditional JavaScript library, you explicitly instantiate the library on a specific element.
<div id="toc"></div>const myTOC = new TableOfContents('#toc'); But with web components, all you need to do is include the custom element associated with the component.
The JSX type generator now generates types for the #css custom properties for your #WebComponents!
Web Components ToolkitJSX Types GeneratorGenerate JSX types for custom elements / web components
Bulletproof Web Component Loading: "Today, I wanted to talk about the 'right' way to load #WebComponents to ensure they work predictably every time. Let’s dig in!" https://gomakethings.com/bulletproof-web-component-loading/
gomakethings.comBulletproof web component loadingToday, I wanted to talk about the “right” way to load web components to ensure they work predictably every time. Let’s dig in!
The challenge Web components are self instantiating.
Let’s imagine you’re creating a table of contents. When you use a traditional JavaScript library, you explicitly instantiate the library on a specific element.
<div id="toc"></div>const myTOC = new TableOfContents('#toc'); But with web components, all you need to do is include the custom element associated with the component.
"Croissant! Building a No-Framework Web App" by @db
https://dbushell.com/2025/07/11/croissant-no-framework-web-app/
The only thing missing from the article is the benefits: no more breakage due to dependency upgrades/ecosystem peer pressure and improved performance. Especially great for side projects—no more byte rot when the project inevitably gets put on the back burner for a few months.
dbushell.comCroissant! Building a No-Framework Web App
More from 
David Bushell 
I put together a simple PR to try to improve the @angular / #WebComponents validation. This would let you be more specific about which components get excluded from validation instead of everything.
I'm working on the custom element validation piece of it later.
GitHubfeat(core): add `isCustomElement` property to modules and components by break-stuff · Pull Request #62638 · angular/angular
I have a position open on my team at Adobe for a senior frontend focused developer with #webcomponents (preferably lit) experience!
Small team, building a new product as part of an incubation organization. Lots to do, and lots of interesting things to build!
https://careers.adobe.com/us/en/job/ADOBUSR157111EXTERNALENUS/Sr--Front-End-Engineer
Adobe · Sr. Front End Engineer in Seattle, Washington, United States of America | Design at AdobeApply for Sr. Front End Engineer job with Adobe in Seattle, Washington, United States of America. Design at Adobe
Cleaning up some of the components for an upcoming project.
Fun getting all the keyboard interactions working as expected. Multiselect was pretty quick but now to add drag and drop which also has to work with multi-select.
#Development #Reviews
Web Awesome is finally here · “Now we have the best CSS framework on the market.” https://ilo.im/165bqw
_____
#WebAwesome #Shoelace #OpenSource #CSS #Framework #UiComponents #WebComponents #WebAPIs #WebDev #Frontend
That HTML Blog · Web Awesome, the First All-in-One Web Components + CSS Framework, is Finally Here
More from 
Jared White (
ally)
ally)
Move over Bootstrap.
Web Awesome is an awesome successor to what in my opinion was already the best open source #WebComponents library (Shoelace) on the market. Now we have the best #CSS framework on the market.
All of the CSS is…um…just CSS and all of the components are…um…just web components. Native #WebDev APIs across the board. 
Take a first look at the brand new public beta:
https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/
That HTML Blog · Web Awesome, the First All-in-One Web Components + CSS Framework, is Finally Here
More from Jared White ( ally)
ally)
Replied in thread
@leaverou These all power HTML in some way or other...
- Scoped Custom Element Registries
- Reference Target API
- elementInternals.type https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md
- Declarative CSS Modules and the adoptedstylesheets attribute https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md
- Declarative Partial Updates https://github.com/WICG/declarative-partial-updates
- DOM Parts
- Platform based windowing/virtualization
- <tabs>
I've got lots more for CSS/JS if you get signed up for those.
Good luck with the survey!
GitHubMSEdgeExplainers/ElementInternalsType/explainer.md at main · MicrosoftEdge/MSEdgeExplainersHome for explainer documents originated by the Microsoft Edge team - MicrosoftEdge/MSEdgeExplainers