Open Styleable Shadow Root Breakout - February 2024

[Westbrook]

At the WCCG's February Meeting (#77), we resolved to hold a breakout session specifically focusing on gathering use cases and proposals to present to implementors in the April Quarterly Face-to-face. Here we're looking to get this session scheduled and gather an agenda for the conversation.

If you'd like to participate, please use this link to share your availability between February 21st and February 28th for this session. It would be great to have a consensus meeting time by February 16th at the latest.

@bkardell has shared a project called Half-light that could be part of the agenda and is gathering feedback on it here.

[Westbrook]

WCCG Breakout: Open Styleable Shadow Roots
Wednesday, February 28 · 1:00 – 2:00pm
Time zone: America/New_York
Google Meet joining info
Video call link: https://meet.google.com/etg-zxdr-nvn

[Westbrook]

The proposed agenda for our chat on Wednesday is much like our chat on Wednesday:

Agenda:

1. Use Cases. Bring your use cases, make sure we fully understand them and make sure we can fully explain them to browser implementors.
2. Checkout the proposals/prototypes. There are a lot.
3. Confirm next steps in preparation for presenting these to implementors in April.

Please share additional topics below!!

[Westbrook]

I'm very appreciative of the great conversation today on this topic, even as it grows in scope and layers 🙃...

Notes from today's session are available here.

Our current next steps are:

1. @keithamus is going to petition the CSS Working Group to allow <link rel=stylesheet> content to play in shadowRoot.adoptedStyleSheets. The goal here is to unlock further conversation/experimentation. [cssom] Can we lift the restriction on constructed flag for adoptedStylesheets? csswg-drafts#10013
2. @michaelwarren1106 and @knowler are going to look at gathering our use cases by constituent and normalizing the nouns used for them across use cases. The goal here is to hopefully see some alignment that points us to the right first steps as far as features and APIs to drive for.
3. I will share the new Speedometer release in Discord when it comes out so that we can leverage some of its more complex examples to test out userspace solutions like @bkardell's Half-Light. The goal here is to get performance data to share with implementors as we push on the prioritization of certain features.
4. I will schedule a March breakout for later in the month to continue to prepare for the April Face-to-Face.

Until then, see you all on Discord. Excited to be making the web an even better place with you all!

Meeting chat hidden within...

You
1:02 PM
https://docs.google.com/document/d/1jOz2Mu8y49j81WPE7__sHkyoUQey6X09JNiYmEh4b1I/edit
https://docs.google.com/document/d/1jOz2Mu8y49j81WPE7__sHkyoUQey6X09JNiYmEh4b1I/edit
Sasha Firsov
1:03 PM
on the road, will keep video off.
Nathan Knowler
1:05 PM
https://github.com/knowler/web-components-open-styling
You
1:06 PM
Owen, if you happened to want to share docs/link as we move around the discussion, that is always welcome!
Brian Kardell
1:09 PM
partial as with current?
can you clarify what you mean sasha?
Miriam Suzanne
1:12 PM
In my use-case the panel is the only part of the component that's shadow-dom
Brian Kardell
1:14 PM
yeah this is an open issue in half-light now, thanks luke :)
Sasha Firsov
1:16 PM
lock from inside and outside. I.e. instance can define open policy and DCE instance can override (enforce?)
Nathan Knowler
1:21 PM
https://discord.com/channels/767813449048260658/1198652960889122836/1204146501152940082
Jesse Jurman
1:21 PM
This diagram? https://media.discordapp.net/attachments/1198652960889122836/1204146500943351808/image.png?ex=65ef5b51&is=65dce651&hm=6d305d56e1301bbfd729fdf74ce6dec82df1e42eed35677899e5f68354ab9cdc&=&format=webp&quality=lossless&width=714&height=223
Sasha Firsov
1:23 PM
@justin, are you talking about "layers as multy-theming?
Luke
1:29 PM
Isn't the whole point of DSD that we want to avoid scripts for loading shadow dom? Else we're back to FOUC land?
Michael Warren
1:30 PM
tailwind's headless UI could be web comps instead of copypasta HTML templates
Sasha Firsov
1:32 PM
it is important. The tyheming would be provided by multiple DCEs
Justin Fagnani
1:33 PM
Good points. I don't think we to "pick one" I think controlled encapsulated theming is very, very important to tackle too.
Michael Warren
1:34 PM
adoptedStylesheets approach is a decent one for today's encapsulation world, but wouldnt account for styles added to the document later etc
Steve Orvell
1:36 PM
re: x-root selection simple example:
library provides: .list .item
component decides the .list should be in shadow and the .item should be slotted. That selector now doesn't work.
Sasha Firsov
1:37 PM
There are cases (like payment) which has to be protected. I.e. developer need ability to define the level of exposure of internals. Open, closed... same as roots
Brian Kardell
1:37 PM
It would make half-light hella more efficient. :)
Michael Warren
1:38 PM
Caleb Williams (not here atm) had the same observation, that linked stylesheets should be adoptable....imo thats a separate feature that is related perhaps
+100 to that
Sasha Firsov
1:38 PM
same as layers or named scopes
Michael Warren
1:41 PM
"it depends" right? is super different than
Rob Eisenberg
1:41 PM
I think it is a surprising behavior that you can't take a style sheet from the document and push it into adopted style sheets. So, making that work would be a win.
Justin Fagnani
1:41 PM
encapsulation is important to not make too fragile shared components. we've seen lots of inability to upgrade because of bad styling, so much that we see things like userland CSS modules munging class names, google3 drastically restricting styling abilities, etc
Brian Kardell
1:43 PM
certainly not all cases are the thing you are saying though westbrook
Miriam Suzanne
1:45 PM
(or easier to move around - which is the part of layering I would want)
Justin Fagnani
1:46 PM
we can't break encapsulation guarantees for existing components and unless the component author opt-into that. The component author may not want to allow styling internal structure that's not part of the public contract and might change.
You
1:46 PM
Brian, I wonder though that with those use cases that are covered with templating removed whether a clearer path to the first API is opened to us.
Brian Kardell
1:46 PM
you can do that in half-light... reject
closed roots reject by default
Justin Fagnani
1:47 PM
you have a link Brian?
Michael Warren
1:48 PM
what Miriam was saying is important too. application authors need to have control in this too. I just think its important to remember that app authors already have control over components today. application authors can always choose where/when/whether or not to use a certain component at all in the first place.

Dont want a component you can't style, don't use and just write HTML.
Brian Kardell
1:49 PM
https://github.com/bkardell/half-light
Justin Fagnani
1:49 PM
thanks!
Michael Warren
1:50 PM
imo a browser native version of half-light's "component pull" or "component pull marked" modes would be a perfect first step down this long long road :P
Brian Kardell
1:50 PM
the last... 4? posts on my blog are about this kind of thing justin https://bkardell.com/blog/ - you can see an evolution there
we also did a podcast with mia https://www.igalia.com/chats/a-lighter-shade-of-dom
we've gotten a lot of interesting feedback and iteration
Sasha Firsov
1:53 PM
layers === named scopes where name is fixed to vendor schema URL, i.e. caan not be changed by consumer
Justin Fagnani
1:54 PM
shadow DOM isn't a security feature, JS can mess with stuff
Steve Orvell
1:54 PM
the encapsulation it provides is really a strong "signpost" and in environments where this matters, in my experience, devs honor signposts like that.
Sasha Firsov
1:54 PM
in DCE we can make it security feature
Brian Kardell
1:55 PM
they are definitely different kinds of cooperation
Luke
1:55 PM
Out of interest justing for "open-stylable" I'm assuming that all styles within that would still be scoped right?
Justin*
Justin Fagnani
1:56 PM
what's the status of setting layers via an attribute? that's an interesting way for a page author to note that styles should be "adopted" w/o modifying the stylesheet
Miriam Suzanne
1:56 PM
if you could layer while adopting, that's additional control
Justin Fagnani
1:57 PM
what about <style layer="my-design-system">?
Justin Fagnani
1:59 PM
seems like DOM?
Keith
1:59 PM
it's CSS
Luke
1:59 PM
CSSOM right?
Keith
1:59 PM
(csswg)
Justin Fagnani
1:59 PM
k
Keith
1:59 PM
yeah css-om
Brian Kardell
2:00 PM
yeah that is what I meant earlier, we have to be careful because it is so easy to get confused
Steve Orvell
2:01 PM
re: script based solutions, I think a bigger concern than perf is FOUC
Luke
2:01 PM
^ is very key. FOUC is the selling point for no-js
Brian Kardell
2:01 PM
it might be too late to remove the confusion around this topic
Brian Kardell
2:02 PM
3

[trusktr]

this topic, even as it grows in scope and layers 🙃...

Ha.. ha.. :D no pun intended!