[go: nahoru, domu]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-cascade-6] The specificity of a scope rule #8500

Closed
mirisuzanne opened this issue Feb 27, 2023 · 9 comments
Closed

[css-cascade-6] The specificity of a scope rule #8500

mirisuzanne opened this issue Feb 27, 2023 · 9 comments

Comments

@mirisuzanne
Copy link
Contributor
mirisuzanne commented Feb 27, 2023

The @scope rule prelude includes two selector lists - one for determining scope 'root' elements, and the other for setting 'scope boundaries' that prune branches from a scope tree:

@scope (.media-object) to (.nested-content) { 
  img { … }
}

The primary impact that people want from scope is the 'scoping' behaviors:

  • supplying lower-boundaries
  • applying scope proximity to the cascade

But there's currently a side-effect built-in, which authors seem to be split on: should the scope prelude selectors have any impact on the specificity of scoped selectors? The arguments for and against are roughly:

  1. Yes, apply scope root specificity ([0, 1, 1] for example above). Scope has some overlap with nesting, so the two should have similar behavior. It makes sense that selectors used to narrow the targeting of sub-selectors would consistently apply their specificity to the final match.
  2. No, don't apply scope specificity ([0, 0, 1] for example above). There are currently no at-rules with specificity, and it would be a side-effect of 'scope' - rather than an essential part of the feature. The cascade behavior we want from scope is already represented by proximity. In order to clearly distinguish scope from nesting (and to keep specificity under control) we should avoid adding that side-effect.

I did a small poll recently, and the ~50/50 results match my less formal conversations. Neither was consistently in the lead, but it was swapping back and forth throughout the duration of the poll.

There is not a 'right' answer here in terms of the scope feature doing what it is meant to do. There are also no existing at-rules currently that use selectors (beyond @supports validating them) - so there is no real precedent in either direction. In either case, authors have other ways to manage the specificity. With option 1, they can use :where() inside scope rules to remove specificity. With option 2, they can add specificity to the nested selectors in various ways (I expect using & would directly apply the root selector specificity).

The current spec uses option 1. I'd lean slightly towards option 2 at this point, convinced by the argument that it's an unnecessary side-effect of the feature. But I believe they are both workable solutions.

(Adding agenda+ in hopes we can cover this during the scope breakout session)

@keithjgrant
Copy link
Contributor
keithjgrant commented Feb 27, 2023

I'd lean slightly towards option 2 at this point, convinced by the argument that it's an unnecessary side-effect of the feature. But I believe they are both workable solutions.

This is exactly how I feel on this one too, fwiw. But either solution is workable, and I don't really see this as a big enough issue to delay the spec, if it comes to that

@tabatkins
Copy link
Member

While I'm sympathetic to the argument that it should hew closer to Nesting (thus option 1), I think Option 2 is indeed the better behavior. I think the simpler we can keep specificity, the better, and indeed the scope-proximity already provides a similar behavior as increased specificity anyway.

@bramus
Copy link
Contributor
bramus commented Feb 28, 2023

Drawing a parallel with @container which also targets a certain parent element (albeit by name) the specificity of the targeted boundary should not be taking into account and option 2 seems like the way to go.

But … that makes me doubtful of the position of @scope in the cascade (strong vs weak).

Say you have this:

header a { /* (0,0,2) */
  color: hotpink;
}

@scope (nav) {
  a { /*(0,0,1) with Option 2*/
    color: lime;
  }
}

With weak scoping, links matching header nav a would be hotpink instead of lime, no? That might be pretty unexpected, I think.

@bramus
Copy link
Contributor
bramus commented Feb 28, 2023

That might be pretty unexpected, I think.

Second guessing myself: depends on how you look at the “problem”. Is the goal of the author to color the links in the header similarly, or is the goal to be able to drop a nav element/component just anywhere in the DOM and have it look the same? 🤔

@DarkWiiPlayer
Copy link

Personally, I can't confirm that scopes adding to the specificity is more intuitive.

Either way of handling this seems easy enough to build a mental model around:

In the yes case, one can think of the upper boundary as a sort of fancier descendant selector, as that is, in a sense, what the scope does.

In the no case, one can think of scopes the same way as media queries: They only restrict when or where a rule applies.

The latter seems a bit more consistent to me, because

  1. @scope looks similar to @media, so I expect it to work in a similar way.
  2. Unless prefixed with :scope, selectors inside the scope's block aren't entirely nested inside the scope. This breaks the mental model of concatenating the selectors anyway.

From a practical perspective, I don't see much value in having scopes change specificity, as that is needless overlap with @layers in my view. The two can be easily combined.

@tabatkins
Copy link
Member

From a practical perspective, I don't see much value in having scopes change specificity, as that is needless overlap with @layers in my view. The two can be easily combined.

Yup, this was gonna be my point as well. Ultimately, a lot of the composition issues are meant to be solved by layers. Trying to solve composition in specificity is imo doomed to failure; specificity is already often very complex for authors, and it serves multiple purposes; stretching it to do even more just makes it more difficult to use in general, even if it solves one particular case slightly more elegantly. (But I'd push back on that as well, tbh.)

@bkardell
Copy link
Contributor

Just to get on the record: I was surprised that it was speced to add specificity, and I thought it seemed to me less intuitive and less good. However, this was not and is not a very strongly held position. I think I find it personally more intuitive that it not include specificity by default, I think that specificity is already complex. That said, I am just one sample and guessed that like most things like this if we could poll the whole world, we'd probably be ~ evenly split and the more important thing is to ultimately just choose one and not get stuck on that :)

@fantasai
Copy link
Collaborator
fantasai commented Mar 1, 2023

My intuition is also to not add the specificity of the scope rule. I think our goal with scoping and layers should be to give authors tools other than specificity to control the cascade, so using it for scoping would counter that direction...

(Specificity is a heuristic. I think it works well in a lot of cases, and that's why we have it, but it's still a heuristic. It would be better if authors had better tools for explicit control over the cascade, imho.)

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-cascade-6] The specificity of a scope rule, and agreed to the following:

  • RESOLVED: the specificity of the scope root is not applied to selectors from scoped rules
The full IRC log of that discussion <fremy> miriam: in the current spec, the specificity of scope works very much like nesting
<fremy> miriam: in that the scope selector gives its specificity to all selectors inside
<fremy> miriam: this seems split 50/50 between people
<fremy> miriam: but this sounds like an accidental side effect that is not necessary
<fremy> miriam: so, we should probably not apply it
<TabAtkins> +1
<bramus> q+
<fantasai> +1
<ydaniv> +1
<fremy> +1
<astearns> ack bramus
<TabAtkins> the thread definintely didn't seem 50/50, but it might be more evenly split in general ^_^
<fremy> bramus: in the thread, I added some doubts, but in the end I agree
<fremy> fantasai: and if you want the other behavior, you can use ampersand
<fremy> miriam: yes, ampersand would work
<fremy> astearns: easier than designing an opt-out
<fremy> astearns: ok, can we get a short summary of the resolution?
<fremy> miriam: the specificity of the scope root is not applied to selectors from scoped rules
<fremy> astearns: any objection?
<fremy> RESOLVED: the specificity of the scope root is not applied to selectors from scoped rules

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests

9 participants