[go: nahoru, domu]
Skip to content

Commit

Permalink
[css-cascade-6][editorial] Examples of relative syntax in scope
Browse files Browse the repository at this point in the history
  • Loading branch information
@mirisuzanne
mirisuzanne committed Mar 3, 2023
1 parent 6ead17c commit 206c2e1
Showing 1 changed file with 91 additions and 8 deletions.
99 changes: 91 additions & 8 deletions css-cascade-6/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ Scoping Styles: the ''@scope'' rule</h3>
while the nested selectors only match elements
that are [=in scope|in a resulting scope=]:

<pre class=lang-css>
<pre highlight=css>
@scope (.light-scheme) {
/* Only match links inside a light-scheme */
a { color: darkmagenta; }
Expand All @@ -290,7 +290,7 @@ Scoping Styles: the ''@scope'' rule</h3>
an author can limit matching more deeply nested descendants.
For example:

<pre class=lang-css>
<pre highlight=css>
@scope (.media-object) to (.content > *) {
img { border-radius: 50%; }
.content { padding: 1em; }
Expand Down Expand Up @@ -346,7 +346,7 @@ Effects of ''@scope''</h4>
<div class=example>
The following selectors have the same specificity (0,0,1):

<pre class=lang-css>
<pre highlight=css>
@scope (#hero) {
img { border-radius: 50%; }
}
Expand Down Expand Up @@ -386,7 +386,7 @@ Effects of ''@scope''</h4>
Those custom scope attributes are then
appended to every single selector in CSS:

<pre class=lang-css>
<pre highlight=css>
p[data-scope~='main-component'] { color: red; }
p[data-scope~='sub-component'] { color: blue; }

Expand Down Expand Up @@ -417,7 +417,7 @@ Effects of ''@scope''</h4>
are excluded from the resulting scope,
which allows authors to create non-overlapping scopes by default:

<pre class=lang-css>
<pre highlight=css>
@scope ([data-scope='main-component']) to ([data-scope]) {
p { color: red; }

Expand All @@ -437,7 +437,7 @@ Effects of ''@scope''</h4>
and universal selector to create scope boundaries that overlap,
such that the inner scope root is part of both scopes:

<pre class=lang-css>
<pre highlight=css>
@scope ([data-scope='main-component']) to ([data-scope] > *) {
p { color: red; }

Expand Down Expand Up @@ -490,6 +490,59 @@ Scoped Style Rules</h4>
is interpreted as a non-[=relative selector=]
(but the [=subject=] must still be [=in scope=] to match).

<div class="example">
By default, selectors in a [=scoped style rule=]
are [=relative selectors=],
with the [=scoping root=] and [=descendant combinator=]
implied at the start.
The following selectors will match the same elements:

<pre highlight=css>
@scope (#my-component) {
p { color: green; }
:scope p { color: green; }
}
</pre>

Authors can adjust the implied relationship
by adding an explicit combinator:

<pre highlight=css>
@scope (#my-component) {
> p { color: green; }
:scope > p { color: green; }
}
</pre>

Authors can also target or explicitly position
the [=scoping root=] in a selector
by including either '':scope'' or ''&'' in a given selector:

<pre highlight=css>
@scope (#my-component) {
:scope { border: thin solid; }
& { border: thin solid; }

main :scope p { color: green; }
main & p { color: green; }
}
</pre>

While the '':scope'' or ''&'' selectors
can both refer to the [=scoping root=],
they have otherwise different meanings in this context:

: Differences in selector matching
:: The '':scope'' selector will only match the [=scoping root=] itself,
while the ''&'' selector is able to match any element
that is matched by the <<scope-start>> selector list.
: Differences in selector specificity
:: The '':scope'' selector has a specificity
equal to other pseudo-classes,
while the ''&'' selector has the specificity
equal to the most specific selector in <<scope-start>>.
</div>

<h4 id="scope-limits">
Identifying Scoping Roots and Limits</h4>

Expand Down Expand Up @@ -549,7 +602,7 @@ Identifying Scoping Roots and Limits</h4>
[=Scoping limits=] can use the '':scope'' pseudo-class
to require a specific relationship to the [=scoping root=]:

<pre class=lang-css>
<pre highlight=css>
/* .content is only a limit when it is a direct child of the :scope */
@scope (.media-object) to (:scope > .content) { ... }
</pre>
Expand All @@ -558,7 +611,7 @@ Identifying Scoping Roots and Limits</h4>
by using '':scope''.
For example:

<pre class=lang-css>
<pre highlight=css>
/* .content is only a limit when the :scope is inside .sidebar */
@scope (.media-object) to (.sidebar :scope .content) { ... }
</pre>
Expand All @@ -574,6 +627,36 @@ Scope Nesting</h4>
are [=scoped selectors|scoped by=]
the selectors of the outer one.

<div class=example>
When nesting ''@scope'' rules inside other ''@scope'' rules,
or inside other selectors,
the <<scope-start>> selector is
[=relative selector|relative to=] the nesting context,
while the <<scope-end>> and any [=scoped style rules=]
are [=relative selector|relative to=] the [=scoping root=]
For example, the following code:

<pre highlight=css>
@scope (.parent-scope) {
@scope (:scope > .child-scope) to (:scope .limit) {
:scope .content {
color: red;
}
}
}
</pre>

is equivalent to:

<pre highlight=css>
@scope (.parent-scope > .child-scope) to (.parent-scope > .child-scope .limit) {
.parent-scope > .child-scope .content {
color: red;
}
}
</pre>
</div>

Global name-defining [=at-rules=]
such as ''@keyframes'' or ''@font-face'' or ''@layer''
that are defined inside ''@scope'' are valid,
Expand Down

0 comments on commit 206c2e1

Please sign in to comment.