diff --git a/css-scoping/Overview.bs b/css-scoping/Overview.bs index a32ad7c1d89..7041ee9faf8 100644 --- a/css-scoping/Overview.bs +++ b/css-scoping/Overview.bs @@ -10,7 +10,7 @@ Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/ Editor: Elika J Etemad, Invited Expert, http://fantasai.inkedblade.net/contact Abstract: This specification defines various scoping/encapsulation mechanisms for CSS, including scoped styles and the ''@scope'' rule, Shadow DOM selectors, and page/region-based styling. Ignored Terms: content, shadowroot, scoped -Link Defaults: selectors (dfn) child combinator, html5 (element) style +Link Defaults: selectors (dfn) child combinator, html (element) style Issue Tracking: Bugzilla https://www.w3.org/Bugs/Public/buglist.cgi?component=Scoping&list_id=47685&product=CSS&resolution=--- @@ -196,17 +196,13 @@ Shadow Encapsulation that can be attached to any element in the DOM. The root of the shadow tree is a shadow root, a non-element node which is associated with a shadow host. - An element can have any number of shadow trees, - which are ordered by creation time. - The most recently-created shadow tree on an element - is the youngest shadow tree for that element. An element with a shadow tree is a shadow host. It is the host element for its shadow trees. The descendants of a shadow host must not generate boxes in the formatting tree. - Instead, the contents of the youngest shadow tree generate boxes + Instead, the contents of the shadow tree generate boxes as if they were the contents of the element instead. In several instances in shadow DOM, @@ -392,57 +388,6 @@ Selecting Into the Light: the '':host'', '':host()'', and '':host-context()'' ps looking for elements that match its argument, until it reaches the document root. -

-Selecting Into the Dark: the ''::shadow'' pseudo-element

- - If an element has at least one shadow tree, - the ::shadow pseudo-element matches the shadow roots themselves. - In HTML, the shadow root is represented by {{ShadowRoot}} objects. - - The ''::shadow'' pseudo-element must not generate boxes, - unless specified otherwise in another specification. - However, for the purpose of Selectors, - the ''::shadow'' pseudo-element is considered to be the root of the shadow tree, - with the top-level elements in the shadow tree the direct children of the ''::shadow'' pseudo-element. - -
- For example, say you had a component with a shadow tree like the following: - - 
-			<x-foo>
-				<"shadow tree">
-					<div>
-						<span id="not-top">...</span>
-					</div>
-					<span id="top">...</span>
-				</>
-			</x-foo>
-
- - For a stylesheet in the outer document, - ''x-foo::shadow > span'' matches ''#top'', - but not ''#not-top'', - because it's not a top-level element in the shadow tree. - - If one wanted to target ''#not-top'', - one way to do it would be with ''x-foo::shadow > div > span''. - However, this introduces a strong dependency on the internal structure of the component; - in most cases, it's better to use the descendant combinator, - like ''x-foo::shadow span'', - to select all the elements of some type in the shadow tree. -
- -
- If an element has multiple shadow trees, - a ''::shadow'' pseudo-element selects all of the corresponding shadow roots. - - Similarly, - inside of a shadow tree, - a selector like '':host::shadow div'' selects the div elements in all the shadow trees on the element, - not just the one containing that selector. -
- -

Selecting Shadow-Projected Content: the ''::content'' pseudo-element

@@ -498,42 +443,6 @@ Selecting Shadow-Projected Content: the ''::content'' pseudo-element -

-Selecting Through Shadows: the ''>>>'' combinator

- - When a >>> combinator - (or shadow-piercing descendant combinator) - is encountered in a selector, - replace every element in the selector match list - with every element reachable from the original element - by traversing any number of child lists or shadow trees. - -
- For example, say you had a component with a shadow tree like the following: - - 
-			<x-foo>
-				<"shadow tree">
-					<div>
-						<span id="not-top">...</span>
-					</div>
-					<span id="top">...</span>
-					<x-bar>
-						<"shadow tree">
-							<span id="nested">...</span>
-						</>
-					</x-bar>
-				</>
-			</x-foo>
-
- - For a stylesheet in the outer document, - the selector ''x-foo >>> span'' - selects all three of <span> elements: - ''#top'', ''#not-top'', and ''#nested''. -
- -

Shadow Cascading & Inheritance

@@ -557,15 +466,10 @@ Cascading Note: This is the opposite of how scoped styles work. - * When comparing two declarations, - if both are in shadow trees with the same host element, - then for normal rules the declaration from the shadow tree that was created most recently wins, - and for important rules the declaration from the shadow tree that was created less recently wins. - - When calculating Order of Appearance, - the tree of trees, - defined by the Shadow DOM specification, - is used to calculate ordering. + The Order of Appearance + between declarations in different trees is not defined. + The order of such declarations is resolved by the Shadow Tree criteria + that has higher priority than the Order of Appearance.

Inheritance