[css-scoping-1][editorial] Add examples of tree-scoped references and inheritance.

Author: tabatkins

css-scoping-1/Overview.bs

@@ -608,6 +608,115 @@ Name-Defining Constructs and Inheritance</h3>
 		* others?
 	</div>
 
+	<div class=example>
+
+		For example,
+		given the following document
+		(using the imaginary <::shadow></::shadow> markup
+		to indicate an element's [=shadow tree=]):
+
+		<xmp highlight=markup>
+			<p class=outer>Here's some text in the outer document's "foo" font.
+			<style>
+				@font-face {
+					font-family: foo;
+					src: url(https://example.com/outer.woff);
+				}
+				body { font-family: foo; }
+				my-component::part(text) { font-family: foo; }
+			</style>
+
+			<my-component>
+				<::shadow>
+					<p class=inner-default>I'm inheriting the outer document's font-family.
+					<p class=inner-styled>And I'm explicitly styled to be in the component's "foo" font.
+					<p class=part-styled part=text>
+						I'm explicitly styled by the outer document,
+						and get the outer document's "foo" font.
+					<style>
+						@font-face {
+							font-family: foo;
+							src: url(https://example.com/inner.woff);
+						}
+						.inner-styled { font-family: foo; }
+					</style>
+				</::shadow>
+			</my-component>
+		</xmp>
+
+		The ''.outer'' element references the outer ''@font-face'', using the "outer.woff" file.
+
+		The ''.inner-default'' element inherits the ''font-family: foo'' value from the outer document,
+		using the same [=tree-scoped reference=] as ''.outer'',
+		and thus also uses the "outer.woff" font file.
+
+		The ''.inner-style'' element, on the other hand,
+		receives a ''font-family: foo'' from the stylesheet inside the shadow,
+		and thus its [=tree-scoped reference=] refers to the shadow's ''@font-family'',
+		and it uses the "inner.woff" file.
+
+		The ''.part-styled'' element also receives its style from the outer document,
+		tho by being directly set rather than by inheritance.
+		Thus, its [=tree-scoped reference=] also refer's to the outer document,
+		and it uses the "outer.woff" file.
+	</div>
+
+	<div class=example>
+		Here is a more complex example,
+		showing three levels of trees,
+		and illustrating precisely how [=tree-scoped names=] and [=tree-scoped references=] inherit.
+
+		<xmp highlight=markup>
+			<style>
+				@font-face {
+					font-family: foo;
+					src: url(https://example.com/outer.woff);
+				}
+				body { font-family: foo; }
+			</style>
+
+			<child-component>
+				<::shadow>
+					<style>
+						@font-face {
+							font-family: foo;
+							src: url(https://example.com/inner.woff);
+						}
+					</style>
+
+					<grandchild-component>
+						<::shadow>
+							<p class=inner-default>
+								I'm inheriting the outer document's "foo" font.
+							</p>
+							<p class=inner-search>
+								And I can't find a local "foo" font,
+								so I'm searching further up the tree,
+								and find the shadow's "foo" font.
+							</p>
+							<style>
+							.inner-search { font-family: foo; }
+							</style>
+						</::shadow>
+					</grandchild-component>
+				</::shadow>
+			</child-component>
+		</xmp>
+
+		Here, just as in the previous example,
+		''.inner-default'' is inheriting the ''font-family: foo'' declared in the outer document,
+		and so it ends up referencing the outer document's ''@font-face'',
+		and is rendered with the "outer.woff" file.
+
+		On the other hand,
+		''.inner-search'' recieves its style from a stylesheet in <code>&lt;grandchild-component></code>'s shadow tree,
+		so it attempts to find a ''@font-face'' defining a ''foo'' font in that tree.
+		There is no such ''@font-face'',
+		so it starts walking up the shadow trees,
+		finding an appropriate ''@font-face'' in <code>&lt;child-component></code>,
+		so it's rendered with the "inner.woff" file.
+	</div>
+
 <h4 id='shadow-names-serialization'>
 Serialized Tree-Scoped References</h4>
 
@@ -633,7 +742,7 @@ Serialized Tree-Scoped References</h4>
 					font-family: foo;
 					src: url(foo.woff);
 				}
-				.outer { font-family: foo; }
+				body { font-family: foo; }
 			</style>
 
 			<my-component>