Skip to content

Remove >>> combinator from the css-scoping spec. #2511

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
merged 1 commit into from
Apr 20, 2018
Merged

Remove >>> combinator from the css-scoping spec. #2511

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
51 changes: 0 additions & 51 deletions css-scoping-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,57 +396,6 @@ Selecting Slot-Assigned Content: the ''::slotted()'' pseudo-element</h4>
The only way to style assigned text nodes
is by styling the <a>slot</a> and relying on inheritance.

<!--
██ ██ ██
██ ██ ██
██ ██ ██
██ ██ ██
██ ██ ██
██ ██ ██
██ ██ ██
-->

<h4 id='deep-combinator'>
Selecting Through Shadows: the ''>>>'' combinator</h4>

When a <dfn selector id="selectordef-shadow-piercing-descendant-combinator">>>></dfn> combinator
(or <dfn export>shadow-piercing descendant combinator</dfn>)
is encountered in a selector,
replace every element in the <a>selector match list</a>
with every element reachable from the original element
by traversing any number of child lists or shadow trees.

<div class='example'>
For example, say you had a component with a <a>shadow tree</a> like the following:

<pre>
&lt;x-foo>
&lt;"shadow tree">
&lt;div>
&lt;span id="not-top">...&lt;/span>
&lt;/div>
&lt;span id="top">...&lt;/span>
&lt;x-bar>
&lt;"shadow tree">
&lt;span id="nested">...&lt;/span>
&lt;/>
&lt;/x-bar>
&lt;/>
&lt;/x-foo>
</pre>

For a stylesheet in the outer document,
the selector ''x-foo >>> span''
selects all three of <code>&lt;span></code> elements:
''#top'', ''#not-top'', <em>and</em> ''#nested''.
</div>

The <a>shadow-piercing descendant combinator</a> is part of the <a>static profile</a> of Selectors,
not the <a>dynamic profile</a>.
This means that it is usable in,
for example, the {{querySelector()}} method,
but is invalid when used in stylesheets.

<!--
██████ ███ ██████ ██████ ███ ████████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
Expand Down