Open styleable shadow tree and theming

[rniwa]

Session description

Session to discuss open styleable shadow tree and theming WICG/webcomponents#909

Session goal

Come up with a concrete proposal for open styleable shadow tree and theming

Additional session chairs (Optional)

No response

Who can attend

Anyone may attend (Default)

IRC channel (Optional)

#webcomponents

Other sessions where we should avoid scheduling conflicts (Optional)

No response

Instructions for meeting planners (Optional)

No response

Agenda for the meeting.

No response

Links to calendar

• 2024-09-25, 13:15 - 14:15

Meeting materials

• Minutes

[tpac-breakout-bot]

Thank you for proposing a session!

You may update the session description as needed and at any time before the meeting, but please keep in mind that tooling relies on issue formatting: follow the instructions and leave all headings and other formatting intact in particular. Bots and W3C meeting organizers may also update the description, to fix formatting issues or add links and other relevant information. Please do not revert these changes. Feel free to use comments to raise questions.

Do not expect formal approval; W3C meeting organizers endeavor to schedule all proposed sessions that are in scope for a breakout. Actual scheduling should take place shortly before the meeting.

[sorvell]

This is an attempt to frame the discussion of this breakout session. Some of the ideas here should likely be broken out into separate issues, but the issues for open styleable and theming are already over-saturated.

Background

Discussion on open styleable has drifted away from the original proposal focused on providing a bridge for legacy styling and towards a focus on theming. However, theming based on applying user provided stylesheets sacrifices Shadow DOM's styling encapsulation. A proper theming solution should preserve style encapsulation in general while allowing authors to expose a themeable CSS-based API. If this session can focus on developing a good theming system, perhaps the simpler initial proposal for open styleable will be more appealing.

Goals

• focus on theming, not open-styleable: the former may unblock the later.
• explore building on parts
  • opt-in for making parts deeply selectable
    • should support combinators, e.g. like the old shadow/deep selectors but limited to the "part tree"
    • must be declarative, e.g. new mode or flag or via CSS appearance: custom;
  • fixing exportparts
  • allowing a host to participate without defining a part or using its tag name
• ensure new/all CSS features adhere to [css-scoping] Handling global name-defining constructs in shadow trees csswg-drafts#1995
  • helps avoid problems like inconsistent behavior of :has
  • makes sure new features like mixins can be used

Non-goals

• discuss open-styleable, instead consider this blocked on the theming discussion
• discuss css property filtering since this is a general problem applicable to any pseudo-element selector

[dandclark]

Notes from the breakout session:

1:10 PM rniwa set the topic: "Open styleable shadow tree and theming"
1:15 PM → JRJurman joined (~[email protected])
1:16 PM present+
1:16 PM present+
1:17 PM → masonf joined ⇐ CurtBellew quit
1:17 PM present+
1:17 PM present+
1:18 PM → jarhar, kizu6, kschmi and kbabbitt joined
1:19 PM present+
1:19 PM → miriam and TabAtkins joined
1:19 PM #27 (comment)
1:19 PM present+
1:19 PM → ray-schwartz joined (~[email protected])
1:20 PM present+
1:20 PM → giacomo-petri and robglidden joined
1:20 PM present+
1:20 PM q+
1:20 PM — Zakim sees sorvell on the speaker queue
1:20 PM — astearns one is a good number for slides!
1:20 PM ack sorvell
1:20 PM — Zakim sees no one on the speaker queue
1:21 PM → justinf joined (~[email protected])
1:21 PM q+
1:21 PM — Zakim sees justinf on the speaker queue
1:21 PM → alisonmaher joined (~[email protected])
1:21 PM present+
1:22 PM present+
1:22 PM scribenick: dandclark
1:22 PM sorvell: Let's focus discussion on theming if we can, goals for how to do that. My 2c is we have two tools, custom props and parts
1:22 PM → fantasai joined (~[email protected])
1:23 PM — fantasai q?
1:23 PM — Zakim sees justinf on the speaker queue
1:23 PM ...: Custom props apply narrowly and deeply , parts apply to any prop but shallowly
1:23 PM — fantasai RRSAgent, pointer
1:23 PM — RRSAgent See https://www.w3.org/2024/09/25-webcomponents-irc#T20-23-06
1:23 PM ...: Can we explore how to make parts apply deeply across the tree
1:23 PM — fantasai RRSAgent, make minutes
1:23 PM → emilio joined (~[email protected])
1:23 PM I have made the request to generate https://www.w3.org/2024/09/25-webcomponents-minutes.html fantasai
1:23 PM present+
1:23 PM ...: We have export parts which are broken. No traction on issue. Simple fix is to expose via wildcards
1:23 PM ...: Have exponential @@@, have levels of shadow roots
1:23 PM s/...:/.../g
1:23 PM #27 (comment)
1:23 PM WICG/webcomponents#1051
1:23 PM — fantasai dandclark, don't pt the colon
1:24 PM — fantasai when using ellipsis
1:24 PM — dandclark fantasai thanks
1:24 PM — fantasai RRSAgent, make minutes
1:24 PM — fantasai np
1:24 PM I have made the request to generate https://www.w3.org/2024/09/25-webcomponents-minutes.html fantasai
1:24 PM ...Open styleable should be very specific tool to facilitae migrating old stylesheets
1:24 PM q?
1:24 PM — Zakim sees justinf on the speaker queue
1:24 PM ...Can discuss all of this in detail if we get there
1:24 PM ack justin
1:24 PM — Zakim sees no one on the speaker queue
1:24 PM justinf: Want to reiterate, discuss theming outside open styleable
1:25 PM q
1:25 PM — Zakim sees no one on the speaker queue
1:25 PM q+
1:25 PM — Zakim sees sorvell on the speaker queue
1:25 PM ...Want to take step back. We had ::parts selector and ::theme selector. Have idea on ::theme I'd like to talk about
1:25 PM q+
1:25 PM — Zakim sees sorvell, masonf on the speaker queue
1:25 PM ...Have two tools, one is deep, want to find something in between
1:25 PM ...Theme was blocked because people didn't want part attribute to imply something could be themed

ack sorvell
1:25 PM
— Zakim sees masonf on the speaker queue
1:26 PM Dan Clark
sorvell: I want to plant early seed -- I highly doubt we'll get that far today on defining theme thing. Lots of related issues. Want to see CSSWG get more involved
1:26 PM
...Especially because discussing how to match things across compose tree, how combinators work
1:27 PM
masonf: The way you started as we should work on open styleable because it's easier.
1:27 PM
q+
1:27 PM
— Zakim sees masonf, rniwa on the speaker queue
1:27 PM Dan Clark
justinf: They're different topics
1:27 PM
ack masonf
1:27 PM
— Zakim sees rniwa on the speaker queue
1:27 PM Dan Clark
...Theming is adding hew capability for deep theming across shadows
1:27 PM
sorvell: Open styling is simple proposal blossoms into different issues.
1:27 PM
masonf: There's like 10 different use cases from I have a shadow and want to style
1:28 PM
justinf: Need a solution that works for existing sheets.
1:28 PM
masonf: I've heard use case of I have existing styles, and I have global styles that I want to apply to a button
1:29 PM
ack rniwa
1:29 PM
— Zakim sees no one on the speaker queue
1:29 PM Dan Clark
rniwa: Stepping back, we are trying to solve problem of you have a stylesheet in main doc, and want some part to apply to shadow.
1:29 PM Steve Orvell
q+
1:29 PM
— Zakim sees sorvell on the speaker queue
1:29 PM Dan Clark
...People arguing these are sufficiently different to need 2 solutions. Do people agree?
1:29 PM
ack sorvell
1:29 PM
— Zakim sees no one on the speaker queue
1:30 PM Dan Clark
sorvell: yes. Open styleable blows away any type of encapsulation because everything is targetable. Theming API doesnt.
1:30 PM <Michael_Warren0>
q+
1:30 PM
— Zakim sees Michael_Warren on the speaker queue
1:30 PM Dan Clark
rniwa: Depends on what you mean by open shadow tree. Depends on semantics of what we define
1:30 PM
masonf: Can hit use cases if you can control with an option
1:30 PM
sorvell: Every shadow applying to shadow is very brittle
1:30 PM
...vs something like part where you explicitly state everything you want to style
1:30 PM
ack Michael
1:30 PM
— Zakim sees no one on the speaker queue
1:31 PM Dan Clark
Michael_Warren0: I don't think it breaks all encapsulation. Breaks outside in.
1:31 PM
...That's what folks who are used to how framework components expect.
1:31 PM
to throw a wrench in this I would prefer to have web components and slots not require a shadow
1:31 PM Dan Clark
...The styles declared in component can't get out, but styles outside can get in
1:31 PM
q+
1:31 PM
— Zakim sees justinf on the speaker queue
1:32 PM Dan Clark
...Doesn't break all encapsulation that way. Breaks outside in but in a way folks want.
1:32 PM
+1 that's the complaint I've heard the most.
1:32 PM Dan Clark
...They have to deal with this today with React components
1:32 PM
→ sabidussi_marco joined (~[email protected])
1:33 PM Dan Clark
...In some respects to the q of whether theyre sufficently different, comes down to the stylesheets. Looking at the issue there's not a lot of desire for limited API. Desire is for full application, and folks must manage risk of collisions
1:33 PM
ack justin
1:33 PM
— Zakim sees no one on the speaker queue
1:33 PM Dan Clark
justinf: Open styleable and theming are different set of capabilities. What we walked about with ::theme was related to parts
1:33 PM
...Opening up shadow root is how you expose stuff in shadow. What is the role of part in this? Want something more controlled that doesn't throw out encapsulation.
1:34 PM
justinf can you give/link to a quick summary/recap of your impression of ::theme?
1:34 PM Dan Clark
...Theme selector can target parts deep in shadow tree. Doesn't loose validity because we have this other use case.
1:34 PM Steve Orvell
q+
1:34 PM
— Zakim sees sorvell on the speaker queue
1:34 PM Dan Clark
...We can make a more targeted API. We went down that path but didn't finish.
1:34 PM
ack sorvell
1:34 PM
— Zakim sees no one on the speaker queue
1:34 PM
q+
1:34 PM
— Zakim sees masonf on the speaker queue
1:34 PM Dan Clark
sorvell: I want to echo Justin. This is a 'yes and'.
1:35 PM <Michael_Warren0>
headless components is another big feature for open-stylable. in the case of headless comps where you do want to open up "all" of the internals for styling from the outside, how would ::theme work for that?
1:35 PM
q+
1:35 PM
— Zakim sees masonf, gregwhitworth on the speaker queue
1:35 PM Dan Clark
...Problem is there are lots of use cases. Think if you did this with input. That div that you have contenteditable in, author can style it. This is about finishing part, making it reasonable. Like with open and closed shadow, there are different use cases.
1:35 PM
q+
1:35 PM
— Zakim sees masonf, gregwhitworth, rniwa on the speaker queue
1:35 PM Dan Clark
...You can do this today
1:35 PM Miriam Suzanne
q+
1:35 PM
— Zakim sees masonf, gregwhitworth, rniwa, miriam on the speaker queue
1:36 PM <Michael_Warren0>
if ::theme is meant to not be an "all stylable" solution, we'd have to also solve for headless components too in an "unlimited" kind of way that might be cumbersome from the limitations of what ::theme would have
1:36 PM Steve Orvell
q+
1:36 PM
— Zakim sees masonf, gregwhitworth, rniwa, miriam, sorvell on the speaker queue
1:36 PM Dan Clark
masonf: There are 2 viewpoints in the room. Webcomponents users and webcomponent authors. Have heard often, 'I want slots'. Just want styles to keep working. That's the perspective of component users.
1:36 PM
q?
1:36 PM
— Zakim sees masonf, gregwhitworth, rniwa, miriam, sorvell on the speaker queue
1:36 PM Dan Clark
...We keep going back and forth between those
1:36 PM
ack mason
1:36 PM
— Zakim sees gregwhitworth, rniwa, miriam, sorvell on the speaker queue
1:37 PM Dan Clark
justinf: I disagree with that characterization. People have problem with trying to fit component into page with existing stylesheet. People creating new components try the best they can with CSS custom props. Have limited styleability so can limp along with that.
1:37 PM
masonf: Theres back compat, but also people used to doing this with non-shadow pages. They want to keep doing that.
1:37 PM
ack greg
1:37 PM
— Zakim sees rniwa, miriam, sorvell on the speaker queue
1:37 PM Dan Clark
gregwhitworth: 2 points. I feel like it's been eternity since I've seen what theme is. Is there a link?
1:38 PM
TabAtkins: Variant on part. Doesn't exist in spec now.
1:38 PM Westbrook Johnson
https://css-tricks.com/part-theme-explainer/
1:38 PM
Woops link through: https://meowni.ca/posts/shadow-dom/
1:38 PM Lea Verou
q+
1:38 PM
— Zakim sees rniwa, miriam, sorvell, lea on the speaker queue
1:38 PM Dan Clark
gregwhitworth: At salesforce we've moved away from native webcomponents. We have 3p extensions. People use extensions for e.g. a11y. They don't support native webcomponents.
1:39 PM
...We convert slots into light DOM
1:39 PM Westbrook Johnson
Inability to copy/paste right today: https://meowni.ca/posts/part-theme-explainer/
1:39 PM
q?
1:39 PM
— Zakim sees rniwa, miriam, sorvell, lea on the speaker queue
1:39 PM Dan Clark
...Don't get slotted, don't get part, but @@@ just works
1:39 PM
ack rniwa
1:39 PM
— Zakim sees miriam, sorvell, lea on the speaker queue
1:39 PM Dan Clark
rniwa: I think solution for open styleable shadow and theming could be coherent with each other. Have one solution with ability be strict
1:40 PM
...Could also apply all the styles. No design restriction that these need to be separate.
1:40 PM
— gregwhitworth I think we'll need a concrete proposal for theme() to have a meaningful conversation
1:40 PM Dan Clark
...Not saying that's what we want but we should consider the possibility.
1:40 PM
...Problem seems to come up in many use cases.
1:40 PM
...Don't want 3-4 solutions to same problem. Want single solution for most use cases. Or maybe 2 solutions.
1:40 PM
+1 to @rniwa
1:40 PM
ack miriam
1:40 PM
— Zakim sees sorvell, lea on the speaker queue
1:41 PM Dan Clark
miriam: As author of page using components, and author of components, don't think it breaks down so easily.
1:41 PM
...Sometimes I have specialized parts, so part approach makes sense
1:41 PM
...But sometimes I just have a button I want you to style
1:41 PM
...part doesn't work great, need to give button a specialized name.
1:42 PM
...The other thing with part is that sometimes I have chunk of component I want to keep specialized. And other parts I want to expose for styling.
1:42 PM
...So not total either-or.
1:42 PM
...Want to expose some parts for global styles, and expose others selectively or keep hidden.
1:42 PM
— bkardell_ what you want is kind of a ... half-light dom :-p
1:42 PM
+1 to miriam as our base components team uses native shadow for this
1:42 PM Dan Clark
...So it's a false dichotomy.
1:42 PM
ack sorvell
1:42 PM
— Zakim sees lea on the speaker queue
1:43 PM
q+
1:43 PM
— Zakim sees lea, masonf on the speaker queue
1:43 PM Dan Clark
sorvell: I agree with that. Enhancing parts is what I want to focus on because I think it's straightforward. But not a full set of solutions.
1:43 PM
ack lea
1:43 PM
— Zakim sees masonf on the speaker queue
1:43 PM Dan Clark
...Potentially advancing open styleable helps with this. To mason -- I agree people want light dom slotting but I don't know how. Want your ideas, but separately
1:44 PM
Here is LWC's light DOM which takes a web component and renders it in Light DOM: https://lwc.dev/guide/light_dom
1:44 PM Dan Clark
lea: Current style encapsulation is barrier for shadow DOM. One case is templating. Reusable widgets to enhance what HTML is able to do.
1:44 PM
a few slides on an idea for how to make ::theme() work with parts: https://docs.google.com/presentation/d/13GJAJ_1WwxwTmusXnfobveDdYdaOr1TW-YRPhCzLDtg/edit?usp=sharing
1:44 PM
q+
1:44 PM
— Zakim sees masonf, rniwa on the speaker queue
1:44 PM Dan Clark
...All or nothing works well for templating, but not for reusable widgets
1:44 PM
...Encapsulation of some degree is desirable
1:44 PM
...right now we have the nothing, open styleable is the all, nothing cover all use cases
1:45 PM
...Want to opt in specific nodes, or remove specific nodes from what is exposed
1:45 PM Miriam Suzanne
(this is still using the dichotomy that I'm trying to argue against)
1:45 PM Dan Clark
...Not saying open styleable shouldn't advance, it covers chunk of use cases. But we need more granularity.
1:45 PM
...I posed proposal yesterday about exposing a subset.
1:45 PM Miriam Suzanne
q+
1:45 PM
— Zakim sees masonf, rniwa, miriam on the speaker queue
1:45 PM Dan Clark
...Not sure if want to center discussion around that, main focus is the problem
1:46 PM Steve Orvell
q+
1:46 PM
— Zakim sees masonf, rniwa, miriam, sorvell on the speaker queue
1:46 PM Dan Clark
...I don't think I've ever needed full open styleability.
1:46 PM
...There's always something you don't want to expose. But almost everything is exposed when you use parts.
1:46 PM
Big +1 on the "almost is important here"
1:46 PM
ack mason
1:46 PM
— Zakim sees rniwa, miriam, sorvell on the speaker queue
1:46 PM Dan Clark
masonf: Rniwa has good point that more granular API can maybe handle fully open styles.
1:46 PM
— astearns bkardell_ perhaps you can update your proposal to three-quarters-light-dom
1:46 PM
ack rniwa
1:46 PM
— Zakim sees miriam, sorvell on the speaker queue
1:47 PM
+1. another thing people don't always want to expose is the tree structure relationship between parts... yes, sometimes they do
1:47 PM
— bkardell_ astearns 7/8-light-dom
1:47 PM Dan Clark
rniwa: Going back to use cases, expanding part is one approach.
1:47 PM
...Can generalize it, make it work across different trees. That's theme
1:47 PM
...Other approach is define back of props in CSS, have a way to apply those in your tree
1:47 PM
— astearns converging-but-never-arriving-at-open-stylable
1:47 PM Dan Clark
...And I'm sure there are other proposals
1:47 PM Lea Verou
In the spirit of throwing ideas out, here’s the very very rough draft I mentioned: w3c/csswg-drafts#10939

ack miriam
1:48 PM
— Zakim sees sorvell on the speaker queue
1:48 PM Dan Clark
...Can we go through more concrete proposals and evaluate which is more suitable for the use cases. People have vague ideas of what it should look like, but have been very vague about how we will accomplish it.
1:48 PM <Michael_Warren0>
q+
1:48 PM
— Zakim sees sorvell, Michael_Warren on the speaker queue
1:48 PM Lea Verou
though thinking some more, I wonder if what is more suitable is opting nodes out, rather than opting them in
1:48 PM
— bkardell_ astearns it makes me sad that you can't make it work with declarative shadow dom, else I would be happy enough to just keep it as is and move on :)
1:48 PM Dan Clark
miriam: I keep hearing assumption about this dichotomy that's not my experience. Mine is not that either i'm providing should or should not be fully styleable
1:49 PM
...My assumption is always the page author knows what styles should or should not go inside
1:49 PM Lea Verou
q?
1:49 PM
— Zakim sees sorvell, Michael_Warren on the speaker queue
1:49 PM Dan Clark
...And from both ends I want to apply some of my global styles to some of the things in the component
1:49 PM <bkardell_> Brian Kardell
+1 to that bit Mia just said
1:49 PM Dan Clark
...It's not simple dichotomy
1:49 PM
masonf: Makes sense, but what's the API look like?
1:49 PM
ack sorvell
1:49 PM
— Zakim sees Michael_Warren on the speaker queue
1:50 PM Dan Clark
sorvell: I agree, we need to look at this as differnt pieces of overall puzzle.
1:50 PM
q+
1:50 PM
— Zakim sees Michael_Warren, justinf on the speaker queue
1:50 PM Dan Clark
...I want to focus on what I see as easier problem: We have syntax which is for opting parts of trees in, that's part. But falls over with composition. Exportparts sucks
1:50 PM
...Because no wildcards. So should add those
1:50 PM
qq+
1:50 PM
— Zakim sees masonf, Michael_Warren, justinf on the speaker queue
1:50 PM Dan Clark
...But still sucks, it's too fiddly
1:50 PM
Wildcards are an easy fix, sorvell's exact idea was proposed back in 2018 (I linked in the issue)
1:51 PM Dan Clark
...Deep composition -- inside this special container thing I want to target some buttons, I need combinators
1:51 PM Sanket Joshi
q+
1:51 PM
— Zakim sees masonf, Michael_Warren, justinf, sanketj on the speaker queue
1:51 PM Dan Clark
...Shadow and deep from v0 spec was combinators into shadows
1:51 PM
— bkardell_ the cat and the hat selectors 🥳
1:51 PM Westbrook Johnson
q+
1:51 PM
— Zakim sees masonf, Michael_Warren, justinf, sanketj, westbrook on the speaker queue
1:51 PM
q-
1:51 PM
— Zakim sees Michael_Warren, justinf, sanketj, westbrook on the speaker queue
1:51 PM Dan Clark
...We'd go really far with that capability but restricted to the part tree.
1:51 PM
...Then we have that aspect of theming
1:51 PM
...But don't know how that works in CSS
1:52 PM
...Those 2 thinks, fixing exportparts and making parts deeply addressable; at least for that aspect of the puzzle moves the ball forward
1:52 PM
TabAtkins: Lea linked proposal from a few days ago that's exactly what you're saying sorvell.
1:52 PM Sanket Joshi
q-
1:52 PM
— Zakim sees Michael_Warren, justinf, westbrook on the speaker queue
1:52 PM Dan Clark
sorvell: Thanks!
1:52 PM
can someone repost the link?
1:52 PM Dan Clark
masonf: The specific proposal is part exposes part of the tree but it painful to use, so this @@@.
1:53 PM
ack Michael
1:53 PM
— Zakim sees justinf, westbrook on the speaker queue
1:53 PM
s/@@@/exposes all the parts as a reduced version of the shadow tree, selectable with combinators/
1:53 PM Dan Clark
Michael_Warren0: It's tempting to think about the problem and solution from component perspective. But it's multidimensional. Depends on who you are relative to the cmponent and the application that's using it
1:53 PM
lea do you ahve the proposal link?
1:53 PM Lea Verou
justinf: w3c/csswg-drafts#10939
1:53 PM
— astearns w3c/csswg-drafts#10939 justinf
1:53 PM
thanks!
1:54 PM Dan Clark
... @@@ isn't necessarily theming because I'm not just changing a color, there are other bigger things like layout I'm changing.
1:54 PM
...E.g. Shoelace, author has no knowledge of what exists in the component
1:54 PM
q?
1:54 PM
— Zakim sees justinf, westbrook on the speaker queue
1:55 PM
ack justin
1:55 PM
— Zakim sees westbrook on the speaker queue
1:55 PM Dan Clark
...Want to narrow down the relationship between the component and the environment.
1:55 PM Westbrook Johnson
q-
1:55 PM
— Zakim sees no one on the speaker queue
1:55 PM Steve Orvell
Thanks so much Lea, this proposal is amazing (w3c/csswg-drafts#10939)
1:55 PM Dan Clark
justinf: To rniwa's point about concrete proposals. We had thing that exist, CSS props and parts
1:55 PM
...upcoming CSS features like mixins, vague versions of theme. Each has pros and cons.
1:55 PM
...gatherting that might help us make a rubric for evaluating other things.
1:56 PM Steve Orvell
q+
1:56 PM
— Zakim sees sorvell on the speaker queue
1:56 PM Dan Clark
...Important aspect of the solution is you can potentially merge different styles.
1:56 PM
ack sorvell
1:56 PM
— Zakim sees no one on the speaker queue
1:57 PM Dan Clark
...If you go through these you will come up with the types of objectsions you'll need to just solutions by
1:57 PM
sorvell: We use style isolation in shadowDom as big hammer for core problem with CSS
1:57 PM
...Want page to have styling policy where I say some user of lib can style certain things. But can't style others.
1:57 PM
E.g. input has placeholder. Lots of props you can set on placeholder that break the input.
1:58 PM
s/E.g./...e.g.
1:58 PM
...If browser had way to limit what you can do with that, that would be good
1:58 PM Lea Verou
thanks sorvell, glad I posted it then! Took me a while to press the submit button, I thought it was so outside the Overton window and so ambitious that I'd lose all credibility 🤣
1:58 PM Dan Clark
...It's just a CSS concept we don't have.
1:58 PM
q?
1:58 PM
— Zakim sees no one on the speaker queue
1:58 PM Dan Clark
...For lack of better word I'm calling it a policy
1:58 PM
q+
1:58 PM
— Zakim sees justinf on the speaker queue
1:58 PM
ack justin
1:58 PM
— Zakim sees no one on the speaker queue
1:59 PM Dan Clark
justinf: Looking at nonwebcomonent solutions as well. It's common in corporate environments it's common to have policy that bans certain selectors. Have to use opaque classnames.
1:59 PM
...That's common with solutions like userland CSS modules
1:59 PM
...Points to people not using selectors like they could.
2:00 PM
...Maybe also indicates we don't need the full selector feature set.
2:00 PM
...People get by now using IDs and opaque classnames.
2:00 PM
q?
2:00 PM
— Zakim sees no one on the speaker queue
2:00 PM
q+
2:00 PM
— Zakim sees gregwhitworth on the speaker queue
2:00 PM Dan Clark
...I worry about exposing tree structure relationship of parts. Hvae seen components change where that changes, so that's a breaking change for the component.
2:00 PM
ack gregwhitworth
2:00 PM
— Zakim sees no one on the speaker queue
2:00 PM Steve Orvell
+q
2:00 PM
— Zakim sees sorvell on the speaker queue
2:00 PM
ack sorvell
2:00 PM
— Zakim sees no one on the speaker queue
2:01 PM
q+
2:01 PM
— Zakim sees masonf on the speaker queue
2:01 PM
q+
2:01 PM
— Zakim sees masonf, JRJurman on the speaker queue
2:01 PM
q+
2:01 PM
— Zakim sees masonf, JRJurman, rniwa on the speaker queue
2:01 PM Dan Clark
sorvell: I think this is a big space. Have webcomponents CG but don't have CSS horsepower in that group. Want more participation. Know there's interest in CSSWG but not sure how we can do that. Ideas for that would be awesome
Sanket Joshi
q+
2:01 PM
— Zakim sees masonf, JRJurman, rniwa, sanketj on the speaker queue
2:01 PM
q+
2:01 PM
— Zakim sees masonf, JRJurman, rniwa, sanketj, justinf on the speaker queue
2:01 PM Dan Clark
masonf: ONe specific idea was ::part with some combinator. Can we look at that more?
2:02 PM
ack mason
2:02 PM
— Zakim sees JRJurman, rniwa, sanketj, justinf on the speaker queue
2:02 PM
ack jrjurman
2:02 PM
— Zakim sees rniwa, sanketj, justinf on the speaker queue
2:02 PM Dan Clark
JRJurman: Thinking about what greg mentioned, I get the sense that as people put out components, if there was some way to expose some part for styling, there will probably be pressure to expose the whole thing. E.g. extensions that want to change everything.
2:03 PM
...Not sure if I'd ever want to say I"m making a thing and only some can be styled, then anticipate github issues about wanting more to be styleable
2:03 PM
...If people want to style it, there's pressure to let them
2:03 PM
ack rniwa
2:03 PM
— Zakim sees sanketj, justinf on the speaker queue
2:03 PM Dan Clark
rniwa: focusing on theming use cases might be valuable way to limit discussion. Problem space is v big.
2:04 PM
...Despite I said needs to be solution for all of them, maybe don't need solution for all use cases.
2:04 PM Steve Orvell
q+
2:04 PM
— Zakim sees sanketj, justinf, sorvell on the speaker queue
2:04 PM
ack sanket
2:04 PM
— Zakim sees justinf, sorvell on the speaker queue
2:04 PM Dan Clark
masonf: +1 let;s pick solution and see what cases it solves
2:04 PM
sanketj: I agree. Let's outline what proposals we have, what they solve.
2:04 PM
I'd like to present an idea for ::theme() that I think addresses a lot of problems with parts
2:04 PM <Michael_Warren0>
+1 to Lea's proposal above. It seems like it would work for headless components (ie, in a tailwind global css env) and would work for design systems like web awesome
2:05 PM Dan Clark
...Maybe there's some lines we can continue to bring discussion forward
2:05 PM
ack justin
2:05 PM
— Zakim sees sorvell on the speaker queue
2:05 PM
https://docs.google.com/presentation/d/13GJAJ_1WwxwTmusXnfobveDdYdaOr1TW-YRPhCzLDtg/edit#slide=id.g2f8ba040b01_0_0
2:06 PM Dan Clark
justinf: Tab and I looked at theme. Big problem was it selected too many things. People that added part attrs to their shadow maybe dind't want those to be exposed all the way up the tree
2:06 PM
...Component using child component doesn't necessarily want to expose all the child parts for theming
2:06 PM
...So wanted to make theming more targeteable.
2:07 PM <Michael_Warren0>
to justin's point, a good thing about lea's proposal above is that it doesnt need names that would have conflicts
2:07 PM Dan Clark
...Also need a way to filter by host, but not by host tag name, might be different by component. Want host to opt into exposing things as theme, and establish some identifier for those. When selecting for those, select some theme name and part.
2:07 PM <Michael_Warren0>
the point about having naming conflicts is a good one, so imo a solution should prevent that
2:07 PM Dan Clark
...Goes deeply down the page, is coherent with parts but more targeted.
2:08 PM
...Goes a long way towards letting design systems do what they want
2:08 PM
ack sorvell
2:08 PM
— Zakim sees no one on the speaker queue
2:08 PM Dan Clark
sorvell: I think that's interesting idea.
2:08 PM
I'd love to see that written as a rough proposal, it would help me understand it a little better.
2:08 PM Dan Clark
...The reason I like having solution that includes combinators is my mental model for sytling is needs to satisfy: want to style one, want to style all, want to style some, where typically that's some subtree
2:08 PM Lea Verou
+1 to sorvell
2:09 PM Dan Clark
...Main point is: we have exportparts. We have parts. Not great, cumbersome -- don't work because need to export parts on all the things, becomes burdensome.
2:09 PM
+1 to this
2:09 PM Dan Clark
...Adding wildcards is very simple way to achieve something useful
2:09 PM
justinf: It's more broken because of name collisions
2:09 PM Westbrook Johnson
WICG/webcomponents#1051 (comment)
2:10 PM Dan Clark
TabAtkins: Forwarding and prefix-changing was part of original proposal
2:10 PM
sorvell: It's completely unusable. Shoelace uses but that's about it because it's so cumbersome
2:10 PM
q?
2:10 PM
— Zakim sees no one on the speaker queue
2:10 PM
exportparts="" to forward all as-is, exportparts="foo-: bar-*" to forward all the foo- prefixes, replaced with bar- prefixes
2:10 PM Dan Clark
masonf: Seems like separate issue, but a good one
2:11 PM
w3c/csswg-drafts#10939
2:12 PM
Go here https://www.w3.org/events/meetings/19813be0-9902-4bad-8d50-3ad49ba792e6/
2:12 PM <Michael_Warren0>
export parts seems tricky. if lea's proposal gets traction, i could see export parts being deprecated in favor of that feature. lea's proposal seems to be a re-imagining of parts in a more robust way
2:12 PM
and click the join button
2:13 PM Dan Clark
sorvell: I beg your patience because I respec the people in this room. One of the things as a component user is when there's awesome new stuff added CSS, but we wonder if it will work in shadow DOM.
2:13 PM
...The more we can make stuff so these questions are worked out the better. E.g. how does has work with shadow DOM is unclear
2:13 PM <Michael_Warren0>
+1000 to awesome css features in shadow dom
2:13 PM Dan Clark
...The more we can get a genral solution the better
2:14 PM
lea:
2:14 PM
...Filed this yesterday, wasn't sure if should post
2:15 PM
...Was thinking part is a huge pain point both when defining and using components. When defining because have to expose with reasonable names. When using you have to figure out names, build mental model of how fits together, and there's still stuff you can't do
2:15 PM
...I was thinking what is the real author intent? It's that we want to expose subset of shadow tree with part.
2:15 PM
...When people use part, over 90% of elements are exposed
2:15 PM
...Usually need reason not to expose something
2:16 PM
...Open styleable sort of solves this but usually still need to hide something
2:16 PM
...What if we had html attribute -- tentatively export; it just exports that element
2:16 PM
...Introduce combinator that gives you access to this exposed subtree. Don't know if you need mutiple or just once works
2:16 PM
q+
2:16 PM
— Zakim sees justinf on the speaker queue
2:16 PM Dan Clark
...That subtee only consists of exposed elements.
2:16 PM Steve Orvell
q+
2:16 PM
— Zakim sees justinf, sorvell on the speaker queue
2:17 PM
⇐ giacomo-petri quit (~[email protected])
2:17 PM Dan Clark
...Within it, selectors just work normally but only apply to that subtree
2:17 PM
...You could even use attribute selectors on part , making part work better
2:17 PM
...Can introduce more granularity, cutting out subtrees, or even granularity on sub-element level
2:18 PM <Michael_Warren0>
q+
2:18 PM
— Zakim sees justinf, sorvell, Michael_Warren on the speaker queue
2:18 PM
q+
2:18 PM
— Zakim sees justinf, sorvell, Michael_Warren, emilio on the speaker queue
2:18 PM Dan Clark
...Can even introduce syntax to allow aria to hook in
2:18 PM
...Or other parts of the platform. Depends on the overlap of what elements you want to expose for styling and for other purposes
2:18 PM
...Can also be used with native elements, instead of introducing a bunch of new pseudos
2:19 PM
...Maybe the element type would not be exposed so you can't use type selectors
2:19 PM
...Could even end up with a different structure then what you originally had
2:19 PM
...<walks though example with spinner, where exposed subteee is different>
2:19 PM
...But it could break expectations e.g. if you're applying grid
2:20 PM
...But part has the same problem
2:20 PM <bkardell_> Brian Kardell
q+
2:20 PM
— Zakim sees justinf, sorvell, Michael_Warren, emilio, bkardell_ on the speaker queue
2:20 PM Miriam Suzanne
q+
2:20 PM
— Zakim sees justinf, sorvell, Michael_Warren, emilio, bkardell_, miriam on the speaker queue
2:20 PM <bkardell_> Brian Kardell
q-
2:20 PM
— Zakim sees justinf, sorvell, Michael_Warren, emilio, miriam on the speaker queue
2:20 PM
q?
2:20 PM
— Zakim sees justinf, sorvell, Michael_Warren, emilio, miriam on the speaker queue
2:20 PM Dan Clark
...Open questions: Has access to full flattened subtree? And what if the better approach is to opt out rather than opt in?
2:21 PM
ack justin
2:21 PM
— Zakim sees sorvell, Michael_Warren, emilio, miriam on the speaker queue
2:21 PM
⇐ jarhar and kschmi quit
2:21 PM Miriam Suzanne
q-
2:21 PM
— Zakim sees sorvell, Michael_Warren, emilio on the speaker queue
2:21 PM Dan Clark
justinf: think we need virtual DOM in this other place, where component can produce virtual subtree.
2:21 PM
...One detail is that custom element tagnames aren't reliable as selectors. Host needs to apply a stable label.
2:22 PM
...Material-button could be under any tagname. For this type of component, I want to expose this type of thing inside of it. That applies deeply
2:22 PM
lea: You can just use part
2:22 PM
justinf: But that's applied from the outside
2:22 PM
q-
2:22 PM
— Zakim sees sorvell, Michael_Warren on the speaker queue
2:23 PM
ack sorvell
2:23 PM
— Zakim sees Michael_Warren on the speaker queue
2:23 PM
⇐ sabidussi_marco quit (~[email protected])
2:24 PM Dan Clark
sorvell: I like the direction of this. Exploring stuff like how do you want to export this is good. Might have internal classes I don't want to expose, but fine to export others. Other thing i want to expore is it seems like we're circling this idea of a policy of how I want to expose styling. Does this idea need to be locked in shadow DOM?
2:24 PM
...I'm describing what I want to be styleable. That's sort of what scope is doing
2:24 PM
ack michael
2:24 PM
— Zakim sees no one on the speaker queue
2:24 PM Miriam Suzanne
Scope is selector-in. It can't handle this sort of thing
2:24 PM
This sort of policy has to be DOM-out
2:25 PM Dan Clark
Michael_Warren0: I think about this a lot -- stable names. Concern I have is applying that selector uses something considered internal to that component if it were a 3p. That introduces brittleness.
2:25 PM
...The component could change, that thing we exposed might not be the same anymore. Could break every selector. Needs to be something that isn't selector based. Maybe proposal doesn
2:25 PM
...'t let you use those. It's a place that can introduce brittleness. Class name might not exist later.
2:26 PM Steve Orvell
Rough... @scope ... { appearance: exports-only; ... }
2:26 PM Dan Clark
masonf: Adding this export to your shadow means you're adding it to contract of your component
2:26 PM Alan Stearns
q?
2:26 PM
— Zakim sees no one on the speaker queue
2:26 PM Dan Clark
justinf: Might have classes that are internal that you don't want to be exposed. @@@
2:27 PM
Michael_Warren0: I might refactor the component in a way that I don't know if it's breaking, because I don't know who's querying it.
2:27 PM
...Might want to thing about putting stable names back in this.
2:27 PM Miriam Suzanne
sorvell: Happy to follow up on that at some point (an issue?) but I'm not sure what you see that scoped appearance property doing.
2:27 PM Dan Clark
...Want to make them truly stable so they can't be changed
2:27 PM
⇐ masonf quit (~[email protected])
2:28 PM Dan Clark
lea: I heard discussions about theming. that's what the next breakout is about, but on a lower level
2:28 PM Alan Stearns
https://www.w3.org/events/meetings/a9540089-cb3a-413b-966a-8c1034b31b11/ for the possible next session