Re: [csswg-drafts] [css-pseudo] Custom properties on :root (#6641)

The CSS Working Group just discussed `[css-pseudo] Custom properties on :root`, and agreed to the following:

* `RESOLVED: highlight pseudos inherit across the highlight tree, and the root highlight inherits custom props from the root element`

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> chenney: problem with highlight pseudos with custom properties<br>
&lt;TabAtkins> chenney: right now you have to double your custom props on the root<br>
&lt;TabAtkins> chenney: i summarized the options on the isse<br>
&lt;astearns> s/chenney/schenny/<br>
&lt;dbaron> s/schenny/schenney/<br>
&lt;TabAtkins> schenney: from our perspective (chromium/igalia) our preferred option is that custom props come thru the highlight inheritance chain, then if you get to the root and still dont have a vaue for the custom prop, look at the root element<br>
&lt;TabAtkins> schenney: we feel that has advantage of all th eproposals<br>
&lt;fantasai> summary of the options -> https://github.com/w3c/csswg-drafts/issues/6641#issuecomment-1404031937<br>
&lt;TabAtkins> schenney: simple inheritance chain, don't do two lookups<br>
&lt;TabAtkins> schenney: it addresses the problem that most people put custom props on the root, so we don't have to change our advice<br>
&lt;Rossen_> q?<br>
&lt;TabAtkins> schenney: only problem is that if custom props are further down the tree we won't discover them<br>
&lt;TabAtkins> schenney: But an author always has the ability to put them in the highlight inheritance chain manually<br>
&lt;emilio> q+<br>
&lt;TabAtkins> schenney: So proposal is to use the selection inheritance chain, and put the root element at the top<br>
&lt;TabAtkins> schenney: that's the last proposal in my summary<br>
&lt;Rossen_> ack eli<br>
&lt;bramus> The summary being https://github.com/w3c/csswg-drafts/issues/6641#issuecomment-1641196754<br>
&lt;Rossen_> ack fantasai<br>
&lt;TabAtkins> fantasai: So that means highlight pseudos are able to be assigned custom props?<br>
&lt;TabAtkins> schenney: yes, they can use existing from the root, or you can define them in the highlight itself<br>
&lt;TabAtkins> fantasai: okay, just need to make that clea rin the spec<br>
&lt;Rossen_> ack emilio<br>
&lt;fantasai> summary of latest proposal -> https://github.com/w3c/csswg-drafts/issues/6641#issuecomment-1641196754<br>
&lt;TabAtkins> emilio: Is there beahvior difference between this and saying custom highlights always inherit custom props from the root?<br>
&lt;TabAtkins> schenney: I think that is the proposal<br>
&lt;TabAtkins> schenney: We're only saying to inherit custom props from the root not all<br>
&lt;TabAtkins> emilio: Okay as an aside i think the highlight inheritance is funky<br>
&lt;TabAtkins> emilio: but generally i think it's weird that custom props work in some places but not others<br>
&lt;delan> q+<br>
&lt;TabAtkins> emilio: you can't see a custom prop defined on non-root elements<br>
&lt;TabAtkins> TabAtkins: unless you spam them in<br>
&lt;schenney> q+<br>
&lt;TabAtkins> emilio: it makes me sad that this is more complicated and doesn't solve ::backdrop either<br>
&lt;TabAtkins> TabAtkins: ::backdrop is pretty different<br>
&lt;TabAtkins> iank_: the current behavior in the spec is breaking sites, fwiw<br>
&lt;TabAtkins> fremy: What is that bheavior?<br>
&lt;TabAtkins> emilio: a highlight pseudo inherits from your parents highlight pseudo, etc. then the root's highlight doesnt inherit from the root, so you have to specify your custom props on both root and highliht root<br>
&lt;TabAtkins> emilio: Current non-spec behavior is that selection pseudos just inherit from the originating element, no inheritance from the highlight tree at all<br>
&lt;TabAtkins> delan: clarification - the proposal is not that highlight styles inherit from the root, but rather that they continue to inherit from parent highlight styles, but at the top the root highlight inherits from the root element<br>
&lt;emilio> q+<br>
&lt;Rossen_> ack delan<br>
&lt;fantasai> delan: So we're only changing what happens at the top<br>
&lt;fremy> q?<br>
&lt;TabAtkins> florian: for custom props only<br>
&lt;TabAtkins> delan: Right. there was an earlier proposal where we considered doing it for all, and it's simpler, but it breaks paired defautls which are a really important compat behavior<br>
&lt;emilio> q-<br>
&lt;Rossen_> ack schenney<br>
&lt;TabAtkins> fantasai: 1) if we want internally to implement as inherit everything from root to root highlight, you can do that and set "all:initial"<br>
&lt;schenney> q+ now I recall<br>
&lt;TabAtkins> fantasai: you'll have to pull out writing-mode/direction as well. but internally you can just inherit everything and reset a bunch<br>
&lt;schenney> q+<br>
&lt;Rossen_> ack fantasai<br>
&lt;TabAtkins> fantasai: for ::backdrop I think it's completely unrelated, there's no weird cascading/inheritance behavior<br>
&lt;TabAtkins> fantasai: we should discuss ::backdrop but separately. i dont understand why we didn't give it inheritance to begin with<br>
&lt;TabAtkins> fantasai: I feel like this is a good proposal.<br>
&lt;fremy> q+<br>
&lt;oriol> q+<br>
&lt;TabAtkins> fantasai: if you're using custom props in your highlight styling you'll have to set that on the highlight itself, but at that point you're already selecting that highlight so it's not bad<br>
&lt;emilio> q+<br>
&lt;Rossen_> ack schenney<br>
&lt;TabAtkins> schenney: I still think that taking a resolution to consider the broader solution of different place to define custom props (the @document idea from earlier) I think is still important, it would solve other cases<br>
&lt;TabAtkins> schenney: But I think our current proposal for now will fix the breakage we currently see<br>
&lt;Rossen_> ack fremy<br>
&lt;TabAtkins> fremy: I think I agree with that, we should fix the local problem<br>
&lt;TabAtkins> fremy: One comment, to me it makes sense to inherit properties from the originating element<br>
&lt;TabAtkins> fremy: but you say it would b echallenging from impl perspective<br>
&lt;TabAtkins> fremy: why?<br>
&lt;delan> q+<br>
&lt;TabAtkins> schenney: It's *doable* but it requires two sets of inheritance passes to amke it work as authors expect<br>
&lt;TabAtkins> schenney: you'd have to look down the highlight inheritance chain, and if you didn't find a custom variable you'd have to go back to the originating element and walk its inheritance chain<br>
&lt;TabAtkins> schenney: weird behavior from an author's perspective too, it grates me as an author<br>
&lt;Rossen_> q?<br>
&lt;TabAtkins> fremy: It is still confusing to me that you can't make a property called --selection-color and change it further down and ahve it work, you have to send it to the highlight itself<br>
&lt;TabAtkins> fremy: But it's not for me to say what's hard to implement<br>
&lt;TabAtkins> fremy: I do think the root will solve 95% of the problems<br>
&lt;TabAtkins> (I strongly disagree, I think two inheritances is much worse than just rooting the highlight tree under the root el)<br>
&lt;Rossen_> ack oriol<br>
&lt;TabAtkins> oriol: In the spec we resolved that ::backdrop now inherits from originating element<br>
&lt;Rossen_> ack emilio<br>
&lt;fantasai> TabAtkins: when I asked Anne about it, he didn't know why it was that way, so we fixed it<br>
&lt;TabAtkins> emilio: the backdrop case is similar in that the root el isn't in its inheritance chain, so if that's fixed it's good<br>
&lt;TabAtkins> emilio: But I stil lthink it'll be confusing for authors that they can't set further down the tree<br>
&lt;TabAtkins> fantasai: given that highlihgts don't inherit *anything else* from their originating element, i don't think it's unreasonble to assume the custom props inherit the same<br>
&lt;Rossen_> q?<br>
&lt;TabAtkins> fremy: some things are inherited...<br>
&lt;schenney> q+<br>
&lt;TabAtkins> emilio: currentcolor<br>
&lt;TabAtkins> fantasai: that's not inheritance<br>
&lt;Rossen_> ack delan<br>
&lt;TabAtkins> delan: I think we're getting sidetracked<br>
&lt;TabAtkins> delan: I was originally queued to say that all the breakage we've seen (and we've had dozens of bug reports) were about custom props on root<br>
&lt;ntim> q+<br>
&lt;TabAtkins> delan: So not a single instance reported of breakage from custom props elsewhere in the tree<br>
&lt;TabAtkins> delan: so for the compat issue this should be enough<br>
&lt;Rossen_> ack schenney<br>
&lt;TabAtkins> schenney: re: things coming from originating element, yes currentcolor<br>
&lt;TabAtkins> schenney: And next issue is about another case where we might take some info, still not a property tho<br>
&lt;TabAtkins> schenney: In *all* cases tho, for properties themselves it comes solely thru the highlight inheritance chain<br>
&lt;Rossen_> ack ntim<br>
&lt;TabAtkins> ntim: I see authors put custom props on shadow roots, I'd expect that to work<br>
&lt;emilio> To clarify, ntim means via `:host`<br>
&lt;astearns> +1 to accommodating :host as well<br>
&lt;TabAtkins> :host::selection should work, right?<br>
&lt;delan> does this proposal change anything around that?<br>
&lt;emilio> Having an editor custom-element doing something like `:host { --selection-color: red }` and use that from highlight pseudos seems reasonable...<br>
&lt;emilio> no<br>
&lt;emilio> q+<br>
&lt;TabAtkins> schenney: So if you put custom props on the shadow root, do you want it to have different values for the highlight than elsewhere on the page?<br>
&lt;Rossen_> ack emilio<br>
&lt;TabAtkins> emilio: It seems reasonable if you ahve an editor custom element to set custom props on :host<br>
&lt;TabAtkins> emilio: this is what I was talking about - it seems weird as an author that setting props on the root works but setting anywhere else doens't work<br>
&lt;ntim> I agree with emilio<br>
&lt;TabAtkins> emilio: I understand you can say :host::highlight but I think people wouldn't do that<br>
&lt;TabAtkins> emilio: they'd think if the root case worked, why wouldn't other cases work<br>
&lt;schenney> q+<br>
&lt;TabAtkins> q+<br>
&lt;TabAtkins> emilio: I understand this fixes the compat issue and there are ways to get the behavior you want, i just think it's not great<br>
&lt;Rossen_> ack schenney<br>
&lt;fremy> @ TabAtkins, I'll minute you<br>
&lt;TabAtkins> schenney: I just think the only option would be to go to dual inheritance<br>
&lt;TabAtkins> schenney: Which is a bad option too<br>
&lt;TabAtkins> schenney: So I'd prefer minimum compat maintanance<br>
&lt;emilio> ack TabAtkins<br>
&lt;iank_> i would prefer no double inheritance<br>
&lt;fremy> TabAtkins: I don't agree that this would be confusing for authors<br>
&lt;fremy> TabAtkins: having one single inheritance tree is usual<br>
&lt;florian> q?<br>
&lt;florian> q+<br>
&lt;fremy> TabAtkins: and I feel it would be even more strange if different properties inherit in different paths<br>
&lt;emilio> q+<br>
&lt;Rossen_> ack florian<br>
&lt;fremy> TabAtkins: I can see people stumbling on this once, of course, but they can look up and fix it with specific code<br>
&lt;TabAtkins> florian: going in the same direction, custo props are someitmes used to polyfill regular properties<br>
&lt;fremy> TabAtkins: so I don't see this being a long term confusion for authors<br>
&lt;TabAtkins> florian: Having them be more similar rather than more different probably is better<br>
&lt;Rossen_> ack emilio<br>
&lt;TabAtkins> emilio: i'm just not convinced authors would understand that highlight style inherits from other highlight pseudos and finally the root<br>
&lt;delan> q+<br>
&lt;Rossen_> ack dbaron<br>
&lt;florian> s/going in the same direction/going in the same direction as Tab/<br>
&lt;TabAtkins> dbaron: I have mixed feelings overall, but think im' reasonably sympathetic to TAb's argument about consistent model<br>
&lt;TabAtkins> dbaron: one of the thins we might require authors to do is write something both for the el and its highlights<br>
&lt;florian> s/, custo props are/., custo props are also<br>
&lt;TabAtkins> dbaron: which might b epainful because ther'es several highlight pseudos<br>
&lt;TabAtkins> dbaron: we might want a pseudo that refers to all the highlights.<br>
&lt;Rossen_> q?<br>
&lt;TabAtkins> dbaron: probably only useful for custom props<br>
&lt;TabAtkins> dbaron: would probably make this less painful for moving custom props around<br>
&lt;Rossen_> ack delan<br>
&lt;TabAtkins> delan: I think that's a good idea<br>
&lt;TabAtkins> delan: i also wanted to say that i'm not convinced that the proposed behavior would be too difficult for authors to understand<br>
&lt;TabAtkins> delan: and that it would be much worse than the legacy behavior where selection inherited from the originating el<br>
&lt;TabAtkins> delan: that model, which most brwosers currently have, also has unintuitive aspects<br>
&lt;TabAtkins> delan: for example, i set a selection color and background color on `p`, then the children don't have those colors. highight inheritance fixes that<br>
&lt;TabAtkins> delan: it is somethig authors could trip on but I think i generally agree with TAb, they'll trip over it once and then move on<br>
&lt;Rossen_> q?<br>
&lt;dbaron> (The example I gave was that authors could style element, element::all-the-higlight-pseudos { --custom-properties: values }.)<br>
&lt;TabAtkins> fremy: could we have an example of how you fix this with custom els?<br>
&lt;emilio> `:host, :host::highlight { --foo: red }<br>
&lt;TabAtkins> TabAtkins: you just need to shift them into the highlight tree as well<br>
&lt;TabAtkins> fremy: okay that's not that bad<br>
&lt;TabAtkins> Rossen_: so can we get to a resolution?<br>
&lt;emilio> Well, without dbaron's proposal you'd need `:host, :host::selection, :host::spelling-error, :host::grammar-error, :host::highlight(&lt;foo>), :host::highlight(bar), ... { --foo: red }`<br>
&lt;fremy> sorry, didn't minute that<br>
&lt;TabAtkins> proposed resolution: highlight pseudos inherit across the highlight tree, and the root highlight inherits custom props from the root element<br>
&lt;TabAtkins> Rossen_: objections?<br>
&lt;TabAtkins> RESOLVED: highlight pseudos inherit across the highlight tree, and the root highlight inherits custom props from the root element<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6641#issuecomment-1642386369 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 19 July 2023 16:19:40 UTC