My go to is either goldenrod or rebeccapurple for WIP stuff. I might just add ghostwhite to the list. Dope name.

Over the years, I've realized you really need to practice and re-implement patterns often, just like how we're told to practice DSAs. I'm not the strongest developer but I have a design background and geek out when I find better implementations of old patterns.

Most recently: building sortable tables. It's been probably... 5+ years? I forgot about fixed table layouts in that time, somehow. Never implemented this in React before (but had done so in other contexts).

Live demo: pqkg67.csb.app

For additional context, I come at this from the point of view of a design systems author, where your shadow DOM is usually either one or two main elements. In other contexts the trade-offs may be worth consideration for a different composability API.

Personally, I preferred wrapping the element and passing in additional attrs/props for greater control. Having an open Shadow DOM also helps with configurability. Ultimately, I don't think the trade-offs are such that you gain much of anything by requiring your main element be slotted.

... differently. For instance, you lose the ability to easily apply attributes when the element is slotted, instead requiring you to set them later via DOM properties. This becomes moot with some libraries though (such as Lit) which pass your component through a renderer, which helps.

In my experience at ServiceNow (and authoring open source components), I would wrap the core element completely. Only things like content, labels, icons, etc. would be exposed as slots. I think there's value in exposing the element itself, the only challenge is you need to juggle the attributes...

@t3.gg

Mostly excellent. Shoot me a DM (I can't send one to you), then I can send you my cell.

I also bought a house. we're both stuck here for the foreseeable future it seems!