Today, I'm excited to release the CEM Validator for your #webcomponents!

This is designed to be an automated check before your components go to production. I know there is a ton of stuff that can be added to this, but I decided to start small. Features include:

package.json validation
module and definition path validation
a check to ensure you are exporting all types for your APIs
a check to make sure the tag name is present for your components

https://wc-toolkit.com/cem-utilities/cem-validator/

Last Thursday I have one engineer talk about ssr & web components at the AmsterdamJS meetup. Click-baity title, but I promise we tried to give the full picture. :)

Has anyone come across any #js lib that helps wire up points (times) in a video to functions? I'm probably going to roll my own, but just wondering if there is any good prior art. The task I have been set is to connect docs and videos together to form sort of tutorial content.

Today, I'm excited to add the #webcomponents Storybook Helpers to the WC Toolkit!

This comes with some new features over the previous version, including:

Performance improvements
Setting API category order
Story-level control over what APIs are displayed

#html #css #javascript #webdev
https://wc-toolkit.com/integrations/storybook/

Over the weekend I built a web component "mini-framework" that uses signals, avoids decorators, and can use functional components. Would love it if anyone would try it out and let me know what you think!

(It uses preact/signals-core and lighterhtml under the hood)

#webcomponents

https://github.com/JimSchofield/minne

I'm happy to roll out the new and improved CEM Inheritance package! This allows API data to be properly inherited in the Custom Elements Manifest for your #webcomponents.

A new feature is that you can now omit inherited APIs from the CEM using JSDoc tags. Enjoy!

https://wc-toolkit.com/documentation/cem-inheritance/

I just noticed Rotten Tomatoes is rockin' some pretty serious #webcomponents!

https://www.rottentomatoes.com/

ElementInternals.type

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md

I have a couple of big things planned this year. The first is to move all of my open-source #webcomponents tools under one banner to make them more official and easier to find. Today I am excited to release the Web Components Toolkit!

https://wc-toolkit.com/

In that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:

https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/

Catch up on some techniques for managing connection time work in a custom element. There's even reasons for using shadow DOM hidden in there.

Thanks @nachtfunke for starting the convo on this and @zachleat for challenging a toot into a full on blog dump.

Hello #webcomponents people. Lets say you need to do a <custom-parent><custom-child> typ of thing, how do you actually do that? I am asking because I noticed that the connectedCallback is firing twice, once you move things around in there and I don't know how to fix it.

I am not using shadow dom.

Haven't had many submissions of late for Awesome Standalone #WebComponents, so threw my collection in to stoke the fire. We'd love for you to add your own standalones!
https://github.com/davatron5000/awesome-standalones

Y'all, I'm not done with squircles!

A few days ago I demonstrated utilizing #CSS clip-path and SVG data to round the corners of an element in a more attractive manner.

That #WebComponents demo turned out well, but it got me thinking I might attempt to “squirclize” a grid of thumbnail images, which eventually led me to the html-squircle #JS library for generating refined curve paths.

Now this looks pretty fun! #WebDev

https://thathtml.blog/2025/01/squircle-images-on-the-loose/

Super excited to see (after years of my involvement and maybe decade of @sundress’s along with MANY other passionate and patient individuals) the web getting a little more accessible: https://github.com/WebKit/WebKit/pull/39742

This just popped into my head and I have not thought about it deeply in the slightest, but

```css
slot { all: inherit; }
```

html streaming + DSD lets us build sites with dynamic parts of your view with 0 client side javascript.

I am so stoked to be present "Using Web Components Like a Boss" this year at @codemash!

We'll be discussing what happens after you've built a kick-ass #webcomponents library and are working on adoption.

https://events.codemash.org/2025CodeMashConference#/agenda?day=3&lang=en&sessionId=76186000004737001&viewMode=2

```<my-element style="display:block">
It’s block!
</my-element>```

or

```<my-element><template shadowrootmode="open"><style>:host {display: block}</style><slot></slot></template>
It’s block!
</my-element>```