[css-shadow-parts-1] Add examples for part and partmap

Author: fergald

css-shadow-parts-1/Overview.bs

@@ -184,6 +184,21 @@ Note: It's okay to give a part multiple names.
 The "part name" should be considered similar to a class,
 not an id or tagname.
 
+<pre class="example">
+&lt;style&gt;
+  c-e<b>::part(textspan)</b> { color: red; }
+&lt;/style&gt;
+
+&lt;template id="c-e-template"&gt;
+  &lt;span <b>part="textspan"</b>&gt;This text will be red&lt;/span&gt;
+&lt;/template&gt;
+&lt;c-e&gt;&lt;/c-e&gt;
+&lt;script&gt;
+  // Add template as custom elment c-e
+  ...
+&lt;/script&gt;
+</pre>
+
 Forwarding a Shadow Element: the <{html-global/partmap}> attribute {#partmap-attr}
 ----------------------------------------------------------------------------------
 Any element in a shadow tree can have a <dfn element-attr for=html-global>partmap</dfn> attribute.
@@ -214,6 +229,35 @@ Issue: Decide whether we use "outer => inner" or vice-versa.
 Issue: Decide whether to allow "ident1 => ident2 ident3 ..."
 as shorthand for "ident1 => ident2, ident1 => ident3, ...".
 
+<pre class="example">
+&lt;style&gt;
+  c-e<b>::part(textspan)</b> { color: red; }
+&lt;/style&gt;
+
+&lt;template id="c-e-outer-template"&gt;
+  &lt;c-e-inner <b>partmap="innerspan textspan"</b>&gt;&lt;/c-e-inner&gt;
+&lt;/template&gt;
+
+&lt;template id="c-e-inner-template"&gt;
+  &lt;span <b>part="innerspan"</b>&gt;
+    This text will be red because the containing shadow
+    host forwards <b>innerspan</b> to the document as "textspan"
+    and the document style matches it.
+  &lt;/span&gt;
+  &lt;span <b>part="textspan"</b>&gt;
+    This text will not be red because <b>textspan</b> in the document style
+    cannot match against the part inside the inner custom element
+    if it is not forwarded.
+	&lt;/span&gt;
+&lt;/template&gt;
+
+&lt;c-e&gt;&lt;/c-e&gt;
+&lt;script&gt;
+  // Add template as custom elments c-e-inner, c-e-outer
+    ...
+&lt;/script&gt;
+</pre>
+
 Exposing More Widely: the <{html-global/theme}> attribute {#theme-attr}
 -----------------------------------------------------------------------