#webComponentsCG

westbrookwestbrook
2025-05-22

If you like this sort of content, or are diving into consuming/developing a myriad of new or long standing APIs available as web components, come join the conversation around making them better at discord.gg/kbba8cKPg9

westbrookwestbrook
2025-02-05

@zachleat @nachtfunke I'm not saying this is because I didn't get you anything for your birthday, but I'm also not saying it isn't because of that...

blog.westbrookjohnson.com/patt

westbrookwestbrook
2025-01-31

@keithamus @ertian once all the kinks are worked out here, the root style sharing we chatted about last week becomes:

export class BaseClass extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.adoptedStyleSheets = [...document.styleSheets];
}
}

🤯

westbrookwestbrook
2025-01-30

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: github.com/WebKit/WebKit/pull/ 🥹

westbrookwestbrook
2025-01-08

@deebloo I think there's a _nuanced_ difference between any base class being able to decorate with `@injectable` and any element opting into provide/consume via a protocol being able to work with a consumer/provider that leverages the protocol via something like `@injectable`, et al. So, it'll be exciting to hear how that might align with the work you've done and are doing!

aren't "standards", but understood and shared usage patterns can be just as powerful!

westbrookwestbrook
2025-01-06

Sometimes (most times?) (always?) software is better with friends...

This mornings got to hangout with some members of the and read the latest proposal for Scoped Custom Elements Registries. 🏗️

github.com/whatwg/html/issues/

Have you checked it out? Have thoughts? 👂

The community group will be meeting with implementors soon to hopefully iron out any final issues as we move towards getting the API agreed on cross browser. 🥰

westbrookwestbrook
2024-12-04

@xro @mia @tabatkins I’ve had good luck in this context. Have a demo of it not working? Would love to help track down and prioritize any issues, if it was spec or browser related. I’ve been loving anchor positioning for so many things and would want to get tripped up on it further down the road!

westbrookwestbrook
2024-11-19
westbrookwestbrook
2024-11-19

@myobie Nice conversation! I do this a lot in my work, especially leveraging the Context Protocol from . I've been thinking about proposing a self resolving path to the protocol to better support shipping elements that aren't used with an established parent context, and might partner with other siblings/cousins/etc that could benefit from the same context. Part github.com/lit/lit/blob/main/p (which needs to be added to the Protocol) and part default resolution.

westbrookwestbrook
2024-11-10

@oldcoyote DOM parts always feel “just out of reach” at the spec level, good posts like yours outlining how they might “cover an important hole in functionality” would go a long way to getting a little extra fire under implementors.

Slottable requests are a consumption pattern the is working to codify as a Community Protocol, so if you see benefits to it, or holes in it, your experience would be highly welcome it making it more useful and helping to spread knowledge of it.

🙇‍♂️

westbrookwestbrook
2024-10-30

@myobie Yes and no. There are lots of examples floating about, but not a good centralized place to find them. That's why the github.com/w3c/webcomponents-cg is kicking off of a "Docs and Guides" work stream. It'll be a big part of our November Meeting on Monday (listed on the calendar in the above GitHub), and async work through out the year. There's a channel for in on our Discord, discord.gg/Tne6E8d9, if you're interested in hoping shape/write/review content for the effort, too.

westbrookwestbrook
2024-10-26

@knowler MDN accepts PRs…

I started working on github.com/Westbrook/axe-core- as a test bed for usage for ace-core, but maybe more useful at large for these APIs. I accept PRs, too. 🤗

Also, we’re looking to reignite the push for community docs and guides for WCs in discord.gg/KzgaSbGc9q to clarify these sorts of things, as well.

westbrookwestbrook
2024-10-25

Have you been disappointed by the passage of time and its negative effect on webcomponents.org?

Think that deserve a place on the internet that belies how practical and productive they are in your work?

Wanna help the bring such a thing to life?

Join us on Discord (discord.gg/KzgaSbGc9q) as we drive to do all this and more for the next generation of web components and web components consumers!

westbrookwestbrook
2024-10-17

@jla are great! Have you thought to join in on the conversation at the github.com/w3c/webcomponents-c

Also, who doesn’t love some <slot/>s?

dev.to/westbrook/who-doesnt-lo

westbrookwestbrook
2024-10-16

So we have Constructible Style Sheets developer.mozilla.org/en-US/do, should we also have Constructible HTML Documents? 🤔

E.G. where a constructed Style Sheet is shared and mutable, should there be a shared an mutable HTML primitive?

Like a lot of HTML needs to be hyper custom, but maybe the shadow DOM of oft-repeated elements like buttons or inputs? Things that rely heavily of <slot>s over templating?

westbrookwestbrook
2024-10-14

This seems reasonable, right ?

```css
custom-element::part(interactive-part) {
&:hover {
/* Please sir, can I have some styles? */
}
}
```

Feels like this was maybe an accidental side effect of specifically preventing things like:

```css
div:after {
&:hover {
/* Nothing to style here... */
}
}
```

Glad to see Tab looking for a second pass on this conversation before fully closing! 🔥

westbrookwestbrook
2024-10-12

Now it's happening in Firefox Nightly, too, behind the `layout.css.has-slotted-selector.enabled` flag. @keithamus is a beast!! 🤘

It's this is fully shipped x-browser before Interop 2025 starts, they'll definitely pick it...if nothing else than to pad their stats!! 🤣

westbrookwestbrook
2024-10-03
DevTools in Chrome Canary with Experimental Web Features flagged on showing the successful test of a `:has-slotted` selector against a `<slot>` element... 💥

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst