@@ -396,57 +396,6 @@ Selecting Slot-Assigned Content: the ''::slotted()'' pseudo-element</h4>
396396 The only way to style assigned text nodes
397397 is by styling the <a>slot</a> and relying on inheritance.
398398
399- <!--
400- ██ ██ ██
401- ██ ██ ██
402- ██ ██ ██
403- ██ ██ ██
404- ██ ██ ██
405- ██ ██ ██
406- ██ ██ ██
407- -->
408-
409- <h4 id='deep-combinator'>
410- Selecting Through Shadows: the ''>>>'' combinator</h4>
411-
412- When a <dfn selector id="selectordef-shadow-piercing-descendant-combinator">>>></dfn> combinator
413- (or <dfn export>shadow-piercing descendant combinator</dfn> )
414- is encountered in a selector,
415- replace every element in the <a>selector match list</a>
416- with every element reachable from the original element
417- by traversing any number of child lists or shadow trees.
418-
419- <div class='example'>
420- For example, say you had a component with a <a>shadow tree</a> like the following:
421-
422- <pre>
423- <x-foo>
424- <"shadow tree">
425- <div>
426- <span id="not-top">...</span>
427- </div>
428- <span id="top">...</span>
429- <x-bar>
430- <"shadow tree">
431- <span id="nested">...</span>
432- </>
433- </x-bar>
434- </>
435- </x-foo>
436- </pre>
437-
438- For a stylesheet in the outer document,
439- the selector ''x-foo >>> span''
440- selects all three of <code> <span></code> elements:
441- ''#top'' , ''#not-top'' , <em> and</em> ''#nested'' .
442- </div>
443-
444- The <a>shadow-piercing descendant combinator</a> is part of the <a>static profile</a> of Selectors,
445- not the <a>dynamic profile</a> .
446- This means that it is usable in,
447- for example, the {{querySelector()}} method,
448- but is invalid when used in stylesheets.
449-
450399<!--
451400 ██████ ███ ██████ ██████ ███ ████████ ████████
452401██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
0 commit comments