Skip to content

[css-cascade-6] Remove selector scoping notation #8460

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.

Sign up for GitHub

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

Merged
mirisuzanne merged 1 commit into from
Feb 17, 2023
Merged

[css-cascade-6] Remove selector scoping notation #8460

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 3 additions & 69 deletions css-cascade-6/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -526,75 +526,6 @@ Scoped Descendant Combinator</h4>
</pre>
</div>

Note: Most simple scoping relationships can be represented with this syntax,
rather than the more complex [=selector scoping notation=] defined below.

<h4 id='selector-scoping'>
Selector Scoping Notation</h4>

The <dfn>selector scoping notation</dfn>
allows [=selectors=] to be scoped
to a subtree of the document,
and allows the possibility of excluding nested subtrees.
It is prepended to the selector or selector list,
and its syntax is as follows:

<pre class='prod'>
<dfn><<selector-scope>></dfn> = ( <<scope-start>> [/ <<scope-end>>]? )
</pre>

If, after parsing, <<scope-start>> is an empty list,
the selector is valid but matches nothing.
Otherwise, the selector matches any element
that is within the [=scope=] described
by the given <<scope-start>> and <<scope-end>> selectors.

<div class="note">
The purpose of the [=selector scoping notation=]
is to allow adding [=scoping limits=] to a selector:

<pre class=lang-css>
(.post / .comments) .title { font-size: 2em; }
</pre>

Without any such lower limits,
the [=selector scoping notation=] is similar to existing descendant selectors,
except that the [=scoping root=] can be matched
by the selector as well.
</div>

The specificity of
the most specific [=complex selector=] in <<scope-start>>
is added to the specificity of each such scoped selector.
The specificity of the <<scope-end>> is ignored.
The [=selector scoping notation=] also applies [=weak scoping proximity=]
between the [=scoping root=] and the [=subject=] of the scoped selector.

ISSUE: Should this have the same [=scope proximity=] weighting as ''@scope''
or different [=scope proximity=] weighting
(or no [=scope proximity=] weighting)?

<div class="example">
For example,
these three selectors will all select the same elements,
with the same specificity:

<pre class=lang-css>
(.ancestor) .child { color: darkmagenta; }
.child:is(.ancestor, .ancestor *) { color: darkmagenta; }
.ancestor.child, .ancestor .child { color: darkmagenta; }
</pre>

However the first rule will win,
because it also applies [=weak scoping proximity=].
</div>

ISSUE: How does this interact with [[CSS-NESTING-1]]?

ISSUE: This notation was added in order to allow scoping limits
to be applied within <code>querySelector()</code>.
Is this something we want to have?

<h3 id="preshint">
Precedence of Non-CSS Presentational Hints</h3>

Expand Down Expand Up @@ -622,6 +553,9 @@ Changes since the 21 December 2021 First Public Working Draft</h3>
Significant changes since the
<a href="https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/">21 December 2021 First Public Working Draft</a> include:

* Removed selector scoping notation.
(<a href="https://github.com/w3c/csswg-drafts/issues/7709">Issue 7709</a>)

* [=Scoping limit=] elements are excluded from the resulting [=scope=].
(<a href="https://github.com/w3c/csswg-drafts/issues/6577">Issue 6577</a>)

Expand Down