Skip to content

Commit 195d3af

Browse files
committed
Document scopes without selectors
Incorporating changes from w3c/csswg-drafts#7349
1 parent 8dcce31 commit 195d3af

File tree

2 files changed

+32
-2
lines changed

2 files changed

+32
-2
lines changed

src/scope/explainer.11tydata.yaml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ created: 2020-12-15
44
changes:
55
- time: 2021-08-24
66
log: Link to syntax comparison
7+
- time: 2022-10-03
8+
log: Document scopes without selectors
79
eleventyNavigation:
810
key: scope-explainer
911
title: Proposal & Explainer

src/scope/explainer.md

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -356,8 +356,8 @@ but adding a lower boundary:
356356
```
357357

358358
I think that's a good place to start.
359-
In my mind, the first ("from") clause should be required,
360-
and may not need explicit labeling.
359+
360+
In my mind, the first ("from") clause may not need explicit labeling.
361361
It would accept a single (complex) selector
362362
(or selector list?):
363363

@@ -412,6 +412,34 @@ provide syntax sugar for single-file components --
412412
automatically generating the from/to clauses --
413413
but move the primary functionality into CSS.
414414

415+
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).
416+
417+
```html
418+
<div>
419+
<style>
420+
@scope {
421+
p { color: red; }
422+
}
423+
</style>
424+
<p>this is red</p>
425+
</div>
426+
<p>not red</p>
427+
```
428+
429+
That would be equivalent to:
430+
431+
```html
432+
<div id="foo">
433+
<style>
434+
@scope (#foo) {
435+
p { color: red; }
436+
}
437+
</style>
438+
<p>this is red</p>
439+
</div>
440+
<p>not red</p>
441+
```
442+
415443
### The (existing) `:scope` pseudo-class
416444

417445
In most cases we can infer

0 commit comments

Comments
 (0)