[css-cascade-6] A way for <style> elements to scope to their parent element #6606

dfabulich · 2021-09-13T16:17:19Z

https://drafts.csswg.org/css-cascade-6/#scoped-styles

The explainer references this issue: Please bring back scoped styles.

Either there's something missing from the spec or I'm missing it, which is a way to have a <style> element that gets scoped to its own parent element.

<div>
  <style scoped>p { color: red; }</style>
  <p>red</p>
</div>

<style scoped> would guarantee that the color only applied to children of the parent div.

I could do it by adding a unique ID or attribute:

<div id="foo">
  <style>#foo p { color: red; }</style>
  <p>red</p>
</div>

… this is basically what Vue does at build time. But I want the same effect without a build step!

I think we'd want something like @scope(:style-parent).

<div>
  <style>@scope(:style-parent) { p { color: red; } }</style>
  <p>red</p>
</div>

Otherwise, even with @scope back in play, I'd still have to use a build tool (or something) to generate an ID for the upper bound of the scope.

The text was updated successfully, but these errors were encountered:

mirisuzanne · 2021-09-13T16:35:06Z

If I understand this right, the new feature required for this is a :style-parent pseudo-class (:style-root? :style-host?) which:

For stylesheets in the document <head> refers to the document root.
For nested stylesheets, refers to their parent element.

I don't see any particular reason it should be restricted to use in @scope if we add it. Could also be used for basic child/descendant selectors, or the :in() pseudo-class. I'm not sure if that's feasible from an implementation perspective, but it's an interesting idea.

dfabulich · 2021-09-13T17:06:05Z

As is typical for spec bugs, I think I've got two ideas piled into one:

I've got a problem: I want to be able to scope styles to the nested <style> element's parent.
I suggest a solution: A new pseudo-class :style-parent (or :style-root or :style-host, yeah) that would refer to the parent element of a nested <style>. (As you point out, that would not be meaningful for stylesheets in the <head>, so presumably in that case we'd want it to refer to :root.)

If :style-parent isn't feasible for some reason, I'd still wish for some solution to the problem. I guess I could try to invent a handful of other solutions…? (The scoped attribute <style scoped> could literally be another alternative, for example.)

mirisuzanne · 2021-09-13T20:47:20Z

Right. But I think one of the issues with <style scoped> is that it has backwards-compatibility problems. Browsers that don't understand the scoped attribute will continue to apply those styles globally (the current behavior) — which is not the ideal fallback here.

I like the pseudo-class idea because it avoids that issue, while building on top of the more flexible CSS-selector driven approach to @scope.

Malvoz · 2021-10-14T12:44:00Z

one of the issues with <style scoped> is that it has backwards-compatibility problems. Browsers that don't understand the scoped attribute will continue to apply those styles globally

Couldn't authors just use a polyfill (i.e. https://github.com/samthor/scoped)?

Malvoz · 2021-10-14T12:45:21Z

Going a bit off-topic (feel free to hide the comment as such):

People are wanting to scope IDREFs in HTML: https://discourse.wicg.io/t/relative-element-references-in-html/5627/, someone suggested a refscope attribute, but I wonder - iff an attribute to scope IDREFs is a viable option - couldn't scoped be extended to apply to HTML elements for IDREF scoping? Or is it a bad idea to have one attribute scope different things depending on which element it is applied to?

bitdivine · 2021-11-01T08:27:58Z

Regarding the backwards compatibility issue, would it be possible to define a CSS selector that refers to the current location of a style tag? If the browser does not recognize it, the CSS selector would match nothing, rather than everything.

That way we could have:

<some-parent>
  <style>
    @here button {some css}
  </style>
  <button>CSS APPLIES HERE</button>
</some-parent>

bitdivine · 2021-11-01T08:35:23Z

Regarding the issue of not wanting CSS to apply to all child elements, or "toroidal css", is that not a separate issue from local scoping? It feels as if it should be possible to define selectors indicating "style this element but not its children" (non-inherited styles) or "style this element like its parent" (explicit inheritance of normally non-inherited styles) but that trying to combine inheritance constraints with local scoping makes things complicated.

mirisuzanne · 2021-11-01T18:32:24Z

@bitdivine The current scope proposal (and this thread) do not have any impact on inheritance. The donut scope applies to selector targeting only.

I do like the approach of a syntax for pointing to style location, whatever form that might take.

@Malvoz The problem is not for authors that want to use the new feature, but for legacy sites that already have nested style tags which apply globally. Authors can recreate a scoped attr using a polyfill, but any browser support for that would break legacy styles, and that's not an option. There's no way to polyfill opting-out all legacy sites from a new feature.

mirisuzanne · 2022-09-21T17:24:13Z

I think this should be resolved by a combination of:

[css-cascade-6] Add ability to scope rules from an imported stylesheet #7348 add a scope() to the @import syntax.
[css-cascade-6] add a :stylesheet selector to match the current stylesheet #7349 @scope without root selector scopes to the parent of the owner node, or the containing tree if there's no owner node.

The first one there allows scoped imports using @import (which we could propose to the WHATWG as an attribute, similar to the proposed layer attribute). The second means you can get the desired behavior by using the @scope rule in the nested style sheet, without waiting for an HTML attribute:

<div>
  <style>
    /* scoped to the div, since no scope root selector is given */
    @scope { p { color: red; } }
  </style>
  <p>red</p>
</div>

Closing this issue as accepted by those resolutions. If we want to work on an additional scope attribute for HTML, that will need to happen in the WHATWG rather than the CSSWG.

yisibl · 2022-10-27T14:39:32Z

@andruud As far as I know, this is not currently implemented in Chrome, can you implement the new behavior in Chrome?

Finally, we could allow @scope without any selector clauses, which would scope the styles to the parent of the stylesheet's owner node (or the containing tree for constructable stylesheets with no owner node).
https://github.com/oddbird/css-sandbox/pull/22/files#diff-959903105b7abdfb2fa2540f104fdd8d7f347e6f339814fdf5e57f7e65f235e9

<div>
  <style>
    @scope {
      p { color: red; }
    }
  </style>
  <p>this is red</p>
</div>
<p>not red</p>

That would be equivalent to:

<div id="foo">
  <style>
    @scope (#foo) {
      p { color: red; }
    }
  </style>
  <p>this is red</p>
</div>
<p>not red</p>

andruud · 2022-10-31T14:35:18Z

@yisibl Right, yes, the current Chrome prototype predates the resolution add that kind of scoping. It will be added eventually. I filed crbug.com/1379844 if you want to follow that for updates.

yisibl · 2022-10-31T15:21:05Z

@andruud Thanks! I am very much looking forward to the implementation of this feature.

Resolves w3c#6606.

* [css-cascade-6] Add implicit scopes Resolves #6606. * Allow lower bounds when root is implicit --------- Co-authored-by: Miriam Suzanne <miriam@oddbird.net>

mirisuzanne added the css-cascade-6 label Sep 13, 2021

mirisuzanne added this to Relevant Issues in Cascade 6 (Scope) Sep 13, 2021

faceless2 mentioned this issue Jun 11, 2022

[css-cascade-6] add a :stylesheet selector to match the current stylesheet #7349

Closed

mirisuzanne moved this from Relevant History to ToDo in Cascade 6 (Scope) Sep 6, 2022

mirisuzanne added the Closed Accepted by CSSWG Resolution label Sep 21, 2022

mirisuzanne closed this as completed Sep 21, 2022

mirisuzanne moved this from ToDo to Done in Cascade 6 (Scope) Sep 21, 2022

mirisuzanne moved this from Done to Needs Edits in Cascade 6 (Scope) Oct 27, 2022

andruud added a commit to andruud/csswg-drafts that referenced this issue Feb 17, 2023

[css-cascade-6] Add implicit scopes

bd711bf

Resolves w3c#6606.

andruud mentioned this issue Feb 17, 2023

[css-cascade-6] Add implicit scopes #8463

Merged

mirisuzanne moved this from Needs Edits to Done in Cascade 6 (Scope) Feb 17, 2023

mirisuzanne added a commit that referenced this issue Feb 17, 2023

[css-cascade-6] Add implicit scopes (#8463)

086f663

* [css-cascade-6] Add implicit scopes Resolves #6606. * Allow lower bounds when root is implicit --------- Co-authored-by: Miriam Suzanne <miriam@oddbird.net>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-cascade-6] A way for <style> elements to scope to their parent element #6606

[css-cascade-6] A way for <style> elements to scope to their parent element #6606

[css-cascade-6] A way for <style> elements to scope to their parent element #6606

[css-cascade-6] A way for <style> elements to scope to their parent element #6606

Comments