Document scopes without selectors

Incorporating changes from w3c/csswg-drafts#7349
dfabulich · Oct 3, 2022 · 195d3af · 195d3af
1 parent 8dcce31
commit 195d3af
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/src/scope/explainer.11tydata.yaml b/src/scope/explainer.11tydata.yaml
@@ -4,6 +4,8 @@ created: 2020-12-15
 changes:
   - time: 2021-08-24
     log: Link to syntax comparison
+  - time: 2022-10-03
+    log: Document scopes without selectors
 eleventyNavigation:
   key: scope-explainer
   title: Proposal & Explainer

diff --git a/src/scope/explainer.md b/src/scope/explainer.md
@@ -356,8 +356,8 @@ but adding a lower boundary:
 ```
 
 I think that's a good place to start.
-In my mind, the first ("from") clause should be required,
-and may not need explicit labeling.
+
+In my mind, the first ("from") clause may not need explicit labeling.
 It would accept a single (complex) selector
 (or selector list?):
 
@@ -412,6 +412,34 @@ provide syntax sugar for single-file components --
 automatically generating the from/to clauses --
 but move the primary functionality into CSS.
 
+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).
+
+```html
+<div>
+  <style>
+    @scope {
+      p { color: red; }
+    }
+  </style>
+  <p>this is red</p>
+</div>
+<p>not red</p>
+```
+
+That would be equivalent to:
+
+```html
+<div id="foo">
+  <style>
+    @scope (#foo) {
+      p { color: red; }
+    }
+  </style>
+  <p>this is red</p>
+</div>
+<p>not red</p>
+```
+
 ### The (existing) `:scope` pseudo-class
 
 In most cases we can infer