[css-shadow-parts][editorial] Fix bikeshed issues

Author: tabatkins

css-shadow-parts-1/Overview.bs

@@ -14,14 +14,14 @@ Abstract: This specification defines the ''::part()'' pseudo-element on <a>shado
 
 <pre class=link-defaults>
 spec:selectors-4;
-    type:selector; text::hover
-    type:dfn; text:live profile
-    type:dfn; text:structural pseudo-class
+	type:selector; text::hover
+	type:dfn; text:live profile
+	type:dfn; text:structural pseudo-class
 spec:dom; type:dfn; for:/; text:shadow root
 spec:infra;
-    type:dfn;
-        text:string
-        text:list
+	type:dfn;
+		text:string
+		text:list
 </pre>
 
 Introduction {#intro}
@@ -66,7 +66,7 @@ it exposed too much of a component's internal structure to scrutiny,
 defeating some of the encapsulation benefits that using Shadow DOM brings.
 For this,
 and other performance-related reasons,
-the >>> combinator was eventually removed from the <a>live profile</a>.
+the >>> combinator was eventually dropped.
 
 This left us with using <a>custom properties</a> as the only way to style into a shadow tree:
 the component would advertise that it uses certain <a>custom properties</a> to style its internals,
@@ -128,7 +128,7 @@ Each element has a <dfn export for="element">part name list</dfn>
 which is an [=ordered set=] of tokens.
 
 Each element has a <dfn export for="element">forwarded part name list</dfn>
-which is a [=list=] of [=pairs=]
+which is a [=list=] of [=tuples=]
 containing a [=string=] for the inner part being forwarded
 and a [=string=] giving the name it will be exposed as.
 
@@ -155,13 +155,13 @@ and changes to the [=part name lists=] and [=forwarded part name lists=] of elem
 			then let |innerRoot| be its shadow root.
 		3. [=calculate the part element map|Calculate=] |innerRoot|'s [=part element map=].
 		4. For each |innerName|/|outerName| in |el|'s [=forwarded part name list=]:
-            1. If |innerName| is an ident:
-    			1. Let |innerParts| be |innerRoot|'s [=part element map=][|innerName|]
-    			2. [=list/Append=] the elements in |innerParts|
-    				to |outerRoot|'s [=part element map=][|outerName|]
-            2. If |innerName| is a pseudo-element name:
-                1. [=list/Append=] |innerRoot|'s pseudo-element(s) with that name
-                    to |outerRoot|'s [=part element map=][|outerName|].
+			1. If |innerName| is an ident:
+				1. Let |innerParts| be |innerRoot|'s [=part element map=][|innerName|]
+				2. [=list/Append=] the elements in |innerParts|
+					to |outerRoot|'s [=part element map=][|outerName|]
+			2. If |innerName| is a pseudo-element name:
+				1. [=list/Append=] |innerRoot|'s pseudo-element(s) with that name
+					to |outerRoot|'s [=part element map=][|outerName|].
 </div>
 
 <!-- Big Text: part=""
@@ -188,16 +188,16 @@ not an id or tagname.
 
 <pre class="example">
 &lt;style>
-  c-e<b>::part(textspan)</b> { color: red; }
+	c-e<b>::part(textspan)</b> { color: red; }
 &lt;/style>
 
 &lt;template id="c-e-template">
-  &lt;span <b>part="textspan"</b>>This text will be red&lt;/span>
+	&lt;span <b>part="textspan"</b>>This text will be red&lt;/span>
 &lt;/template>
 &lt;c-e>&lt;/c-e>
 &lt;script>
-  // Add template as custom element c-e
-  ...
+	// Add template as custom element c-e
+	...
 &lt;/script>
 </pre>
 
@@ -224,73 +224,73 @@ The exportparts attribute is parsed as a comma-separated list of part mappings.
 Each part mapping is one of:
 
 <dl class=switch>
-    : <code>innerIdent : outerIdent</code>
-    :: Adds <code>innerIdent</code>/<code>outerIdent</code> to el's <a>forwarded part name list</a>.
+	: <code>innerIdent : outerIdent</code>
+	:: Adds <code>innerIdent</code>/<code>outerIdent</code> to el's <a>forwarded part name list</a>.
 
-    : <code>ident</code>
-    :: Adds <code>ident</code>/<code>ident</code> to el's <a>forwarded part name list</a>.
+	: <code>ident</code>
+	:: Adds <code>ident</code>/<code>ident</code> to el's <a>forwarded part name list</a>.
 
 		Note: This is shorthand for <code>ident : ident</code>.
 
-    : <code>::ident : outerIdent</code>
-    :: If <code>::ident</code> is the name of a [=part-like pseudo-element=],
-        adds <code>::ident</code>/<code>outerIdent</code>
-        to el's [=forward part name list=].
-        Otherwise, does nothing.
+	: <code>::ident : outerIdent</code>
+	:: If <code>::ident</code> is the name of a [=fully styleable pseudo-element=],
+		adds <code>::ident</code>/<code>outerIdent</code>
+		to el's [=forward part name list=].
+		Otherwise, does nothing.
 
-    : anything else
-    :: Ignored for error-recovery / future compatibility.
+	: anything else
+	:: Ignored for error-recovery / future compatibility.
 </dl>
 
 Note: It's okay to map a sub-part to several names.
 
 <pre class="example">
 &lt;style>
-  c-e<b>::part(textspan)</b> { color: red; }
+	c-e<b>::part(textspan)</b> { color: red; }
 &lt;/style>
 
 &lt;template id="c-e-outer-template">
-  &lt;c-e-inner <b>exportparts="innerspan: textspan"</b>>&lt;/c-e-inner>
+	&lt;c-e-inner <b>exportparts="innerspan: textspan"</b>>&lt;/c-e-inner>
 &lt;/template>
 
 &lt;template id="c-e-inner-template">
-  &lt;span <b>part="innerspan"</b>>
-    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>
-  &lt;span <b>part="textspan"</b>>
-    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 <b>part="innerspan"</b>>
+		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>
+	&lt;span <b>part="textspan"</b>>
+		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>
 &lt;/template>
 
 &lt;c-e>&lt;/c-e>
 &lt;script>
-  // Add template as custom elements c-e-inner, c-e-outer
-    ...
+	// Add template as custom elements c-e-inner, c-e-outer
+	...
 &lt;/script>
 </pre>
 
 <div class=example>
-    For example, a [=part-like pseudo-element=]
-    can be used in the <{html-global/exportparts}> attribute,
-    to masquerade as a ''::part()''
-    for the component it's in:
-
-    <xmp class=html>
-        <template id=custom-element-template>
-            <p exportparts="::before : preceding-text, ::after : following-text">
-                Main text.
-        </template>
-    </xmp>
-
-    An element using that template
-    can use a selector like ''x-component::part(preceding-text)''
-    to target the ''p::before'' pseudo-element in its shadow,
-    so users of the component don't need to know
-    that the preceding text is implemented as a pseudo-element.
+	For example, a [=fully styleable pseudo-element=]
+	can be used in the <{html-global/exportparts}> attribute,
+	to masquerade as a ''::part()''
+	for the component it's in:
+
+	<xmp class=html>
+		<template id=custom-element-template>
+			<p exportparts="::before : preceding-text, ::after : following-text">
+				Main text.
+		</template>
+	</xmp>
+
+	An element using that template
+	can use a selector like ''x-component::part(preceding-text)''
+	to target the ''p::before'' pseudo-element in its shadow,
+	so users of the component don't need to know
+	that the preceding text is implemented as a pseudo-element.
 </div>
 
 
@@ -299,7 +299,7 @@ Note: It's okay to map a sub-part to several names.
  █▌   █▌  ████▌   ███▌  ████▌  █████▌   ██ ██
 ███▌ ███▌ █▌  █▌ ▐█ ▐█  █▌  █▌   █▌    █▌   ▐█
  █▌   █▌  █▌  █▌ █▌  █▌ █▌  █▌   █▌   █▌     ▐█
-          ████▌  █▌  █▌ ████▌    █▌   █▌     ▐█
+		  ████▌  █▌  █▌ ████▌    █▌   █▌     ▐█
  █▌   █▌  █▌     █████▌ █▌▐█     █▌   █▌     ▐█
 ███▌ ███▌ █▌     █▌  █▌ █▌ ▐█    █▌    █▌   ▐█
  █▌   █▌  █▌     █▌  █▌ █▌  █▌   █▌     ██ ██
@@ -313,19 +313,19 @@ allows you to select elements that have been exposed via a <{html-global/part}>
 The syntax is:
 
 <pre class=prod>
-    ::part() = ::part( <<ident>>+ )
+	::part() = ::part( <<ident>>+ )
 </pre>
 
 The ''::part()'' pseudo-element only matches anything
 when the <a>originating element</a> is a <a>shadow host</a>.
 
 <div class="example">
-    For example,
-    if you have a custom button
-    that contains a "label" element that is exposed for styling
-    (via <code>part="label"</code>),
-    you can select it with
-    ''x-button::part(label)''.
+	For example,
+	if you have a custom button
+	that contains a "label" element that is exposed for styling
+	(via <code>part="label"</code>),
+	you can select it with
+	''x-button::part(label)''.
 </div>
 
 <div class="example">
@@ -343,7 +343,7 @@ when the <a>originating element</a> is a <a>shadow host</a>.
 	(or ''::part(active tab)'', as order doesn't matter).
 </div>
 
-The ''::part()'' pseudo-element is a [=part-like pseudo-element=].
+The ''::part()'' pseudo-element is a [=fully styleable pseudo-element=].
 If the <a>originating element's</a> <a>shadow root's</a> <a>part element map</a>
 [=map/contains=] the specified <<ident>>,
 ''::part()'' represents the elements keyed to that ident;
@@ -355,19 +355,19 @@ Otherwise, it matches nothing.
 in the [=originating element's=] shadow tree.
 
 <div class=example>
-    For example,
-    ''x-panel::part(confirm-button)::part(label)''
-    never matches anything.
-    This is because doing so would expose more structural information
-    than is intended.
-
-    If the <code>&lt;x-panel></code>'s internal confirm button had used something like
-    <code>part="label => confirm-label"</code>
-    to forward the button's internal parts up into the panel's own <a>part element map</a>,
-    then a selector like
-    ''x-panel::part(confirm-label)''
-    would select just the one button's label,
-    ignoring any other labels.
+	For example,
+	''x-panel::part(confirm-button)::part(label)''
+	never matches anything.
+	This is because doing so would expose more structural information
+	than is intended.
+
+	If the <code>&lt;x-panel></code>'s internal confirm button had used something like
+	<code>part="label => confirm-label"</code>
+	to forward the button's internal parts up into the panel's own <a>part element map</a>,
+	then a selector like
+	''x-panel::part(confirm-label)''
+	would select just the one button's label,
+	ignoring any other labels.
 </div>
 
 
@@ -387,7 +387,7 @@ Extensions to the {{Element}} Interface {#idl}
 
 <pre class=idl>
 partial interface Element {
-  [SameObject, PutForwards=value] readonly attribute DOMTokenList part;
+	[SameObject, PutForwards=value] readonly attribute DOMTokenList part;
 };
 </pre>
 
@@ -404,7 +404,7 @@ Microsyntaxes for parsing {#parsing}
 Rules for parsing part mappings {#parsing-mapping}
 ----------------------------------------------
 
-A <dfn export>valid part mapping</dfn> is a [=pair=] of tokens
+A <dfn export>valid part mapping</dfn> is a [=tuple=] of tokens
 separated by a U+003A COLON character
 and any number of space characters before or after the U+003A COLON
 The tokens must not contain U+003A COLON or U+002C COMMA characters.
@@ -417,19 +417,19 @@ The rules for parsing a part mapping are as follows:
 
 1. [=Collect a sequence of code points=] that are space characters
 1. [=Collect a sequence of code points=] that are not space characters or U+003A COLON characters,
-    and let <var>first token</var> be the result.
+	and let <var>first token</var> be the result.
 1. If <var>first token</var> is empty then return error.
 1. [=Collect a sequence of code points=] that are space characters.
-1. If the end of the <var>input</var> has been reached, return the [=pair=] <var>first token</var>/<var>first token</var>
+1. If the end of the <var>input</var> has been reached, return the [=tuple=] (<var>first token</var>, <var>first token</var>)
 1. If character at <var>position</var> is not a U+003A COLON character, return error.
 1. Consume the U+003A COLON character.
 1. [=Collect a sequence of code points=] that are space characters.
 1. [=Collect a sequence of code points=] that are not space characters or U+003A COLON characters.
-    and let <var>second token</var> be the result.
+	and let <var>second token</var> be the result.
 1. If <var>second token</var> is empty then return error.
 1. [=Collect a sequence of code points=] that are space characters.
 1. If <var>position</var> is not past the end of <var>input</var> then return error.
-1. Return the [=pair=] <var>first token</var>/<var>second token</var>.
+1. Return the [=tuple=] (<var>first token</var>, <var>second token</var>).
 
 Rules for parsing a list of part mappings {#parsing-mapping-list}
 ----------------------------------------------
@@ -443,18 +443,32 @@ The rules for parsing a list of part mappings are as follow:
 1. Let <var>input</var> be the string being parsed.
 
 1. [=split a string on commas|Split the string <var>input</var> on commas=].
-    Let <var>unparsed mappings</var> be the resulting list of strings.
+	Let <var>unparsed mappings</var> be the resulting list of strings.
 
-1. Let <var>mappings</var> be an initially empty [=list=] of [=pairs=] of tokens.
-    This [=list=] will be the result of this algorithm.
+1. Let <var>mappings</var> be an initially empty [=list=] of [=tuples=] of tokens.
+	This [=list=] will be the result of this algorithm.
 
 1. For each string <var>unparsed mapping</var> in <var>unparsed mappings</var>,
-    run the following substeps:
-
-    1. If <var>unparsed mapping</var> is empty or contains only space characters,
-        continue to the next iteration of the loop.
-    1. Let <var>mapping</var> be the result of parsing <var>unparsed mapping</var>
-        using the <span>rules for parsing part mappings</span>.
-    1. If <var>mapping</var> is an error then continue to the next iteration of the loop.
-        This allows clients to skip over new syntax that is not understood.
-    1. Append <var>mapping</var> to <var>mappings</var>.
+	run the following substeps:
+
+	1. If <var>unparsed mapping</var> is empty or contains only space characters,
+		continue to the next iteration of the loop.
+	1. Let <var>mapping</var> be the result of parsing <var>unparsed mapping</var>
+		using the <span>rules for parsing part mappings</span>.
+	1. If <var>mapping</var> is an error then continue to the next iteration of the loop.
+		This allows clients to skip over new syntax that is not understood.
+	1. Append <var>mapping</var> to <var>mappings</var>.
+
+<h2 id=priv>
+Privacy Considerations</h2>
+
+This specification defines new ways to target styling of elements on the page,
+which are already fully styleable in other ways.
+As such, it introduces no new privacy considerations.
+
+<h2 id=sec>
+Security Considerations</h2>
+
+As [=shadow trees=] are intentionally not a security boundary,
+merely a convenience for page authors,
+exposing them to selectors in this way introduces no new security considerations.