[shadow-styling] Define cascading and scoping.

Author: tabatkins

shadow-styling/Overview.bs

@@ -8,6 +8,7 @@ ED: http://dev.w3.org/csswg/shadow-styling
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
 Abstract: This specification defines the additions to CSS to accommodate Shadow DOM styling.
 Ignored Terms: content
+Link Defaults: selectors-4 (dfn) scoped selectors/scope/scoping root
 </pre>
 
 <h2 id="intro">
@@ -28,7 +29,7 @@ Shadow Trees</h3>
 	that can be attached to any element in the DOM.
 	An element can have any number of <a>shadow trees</a>,
 	which are ordered by creation time.
-	The most recently-createed <a>shadow tree</a> on an element
+	The most recently-created <a>shadow tree</a> on an element
 	is the <dfn export>active shadow tree</dfn> for that element.
 
 	An element with a <a>shadow tree</a> is a <dfn export>shadow host</dfn>.
@@ -39,6 +40,10 @@ Shadow Trees</h3>
 	Instead, the contents of the <a>active shadow tree</a> generates boxes
 	as if it were the contents of the element instead.
 
+	All selectors appearing in a <a>shadow tree</a>
+	are <a>scoped selectors</a>,
+	with the <a>host element</a> as their <a>scoping root</a>.
+
 <h3 id='distribution-lists'>
 Distribution Lists</h3>
 
@@ -383,13 +388,10 @@ Selecting Based on an Ancestor Outside the Shadow Tree: the '':ancestor()'' pseu
 <h2 id='cascading'>
 Changes to the Cascading Model</h2>
 
-	Shadow DOM enables new ways to target an element and apply styles to it,
-	which don't quite fit into the existing CSS cascade.
+	When calculating <a href="http://dev.w3.org/csswg/css-cascade/#cascade-order">cascade order</a>,
+	declarations in <a>shadow trees</a> are ordered by creation time,
+	with younger <a>shadow trees</a> treated as coming after older <a>shadow trees</a>
+	within a given <a>host element</a>.
 
-	<p class='issue'>
-		I need to go look up what was decided/written down
-		for the cascading precedence
-		of rules from outside a shadow tree reaching in, via the /shadow-* combinators,
-		and of rules from inside a shadow tree reaching out, via the /content combinator.
-		Also, the cascading precedence of styles inside a shadow tree applying to a host element,
-		versus the outside document's styles applying to the host element.
+	Note: Note that styles in a shadow tree are <a>scoped</a> to their <a>host element</a>,
+	so no further ordering is necessary to define.

shadow-styling/Overview.html

@@ -155,7 +155,7 @@ <h3 class="heading settled heading" data-level=2.1 id=shadow-trees><span class=s
 	that can be attached to any element in the DOM.
 	An element can have any number of <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a>,
 	which are ordered by creation time.
-	The most recently-createed <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> on an element
+	The most recently-created <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> on an element
 	is the <dfn data-dfn-type=dfn data-export="" id=active-shadow-tree>active shadow tree<a class=self-link href=#active-shadow-tree></a></dfn> for that element.
 
 <p>	An element with a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a> is a <dfn data-dfn-type=dfn data-export="" id=shadow-host>shadow host<a class=self-link href=#shadow-host></a></dfn>.
@@ -166,6 +166,10 @@ <h3 class="heading settled heading" data-level=2.1 id=shadow-trees><span class=s
 	Instead, the contents of the <a data-link-type=dfn href=#active-shadow-tree title="active shadow tree">active shadow tree</a> generates boxes
 	as if it were the contents of the element instead.
 
+<p>	All selectors appearing in a <a data-link-type=dfn href=#shadow-tree title="shadow tree">shadow tree</a>
+	are <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scope title="scoped selectors">scoped selectors</a>,
+	with the <a data-link-type=dfn href=#host-element0 title="host element">host element</a> as their <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a>.
+
 <h3 class="heading settled heading" data-level=2.2 id=distribution-lists><span class=secno>2.2 </span><span class=content>
 Distribution Lists</span><a class=self-link href=#distribution-lists></a></h3>
 
@@ -498,16 +502,13 @@ <h3 class="heading settled heading" data-level=5.3 id=ancestor-selector><span cl
 <h2 class="heading settled heading" data-level=6 id=cascading><span class=secno>6 </span><span class=content>
 Changes to the Cascading Model</span><a class=self-link href=#cascading></a></h2>
 
-<p>	Shadow DOM enables new ways to target an element and apply styles to it,
-	which don’t quite fit into the existing CSS cascade.
+<p>	When calculating <a href=http://dev.w3.org/csswg/css-cascade/#cascade-order>cascade order</a>,
+	declarations in <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a> are ordered by creation time,
+	with younger <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a> treated as coming after older <a data-link-type=dfn href=#shadow-tree title="shadow trees">shadow trees</a>
+	within a given <a data-link-type=dfn href=#host-element0 title="host element">host element</a>.
 
-	<p class=issue id=issue-9ae761db><a class=self-link href=#issue-9ae761db></a>
-		I need to go look up what was decided/written down
-		for the cascading precedence
-		of rules from outside a shadow tree reaching in, via the /shadow-* combinators,
-		and of rules from inside a shadow tree reaching out, via the /content combinator.
-		Also, the cascading precedence of styles inside a shadow tree applying to a host element,
-		versus the outside document’s styles applying to the host element.
+<p class=note>	Note: Note that styles in a shadow tree are <a data-link-type=dfn href=http://dev.w3.org/csswg/css-cascade-3/#scoped title=scoped>scoped</a> to their <a data-link-type=dfn href=#host-element0 title="host element">host element</a>,
+	so no further ordering is necessary to define.
 
 <h2 class="no-ref no-num heading settled heading" id=conformance><span class=content>
 Conformance</span><a class=self-link href=#conformance></a></h2>
@@ -668,12 +669,4 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
 <h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><div class=issue>
 		I’m assuming here that "/foo/" is the syntax we’ll agree on for named combinators.
 
-<a href=#issue-46cdc4d6> ↵ </a></div><div class=issue>
-		I need to go look up what was decided/written down
-		for the cascading precedence
-		of rules from outside a shadow tree reaching in, via the /shadow-* combinators,
-		and of rules from inside a shadow tree reaching out, via the /content combinator.
-		Also, the cascading precedence of styles inside a shadow tree applying to a host element,
-		versus the outside document’s styles applying to the host element.
-
-<a href=#issue-9ae761db> ↵ </a></div></div>
+<a href=#issue-46cdc4d6> ↵ </a></div></div>