[css-scoping] First draft of default element styles, to help resolve W…

…ICG/webcomponents#468

css-scoping/Overview.bs

@@ -11,7 +11,7 @@ Previous Version: https://www.w3.org/TR/2014/WD-css-scoping-1-20140403/
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
 Editor: Elika J Etemad / fantasai, 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: inherit, slot
+Ignored Terms: inherit, slot, custom elements, stylesheets
 Ignored Vars: root elements
 Issue Tracking: Bugzilla https://www.w3.org/Bugs/Public/buglist.cgi?component=Scoping&list_id=47685&product=CSS&resolution=---
 </pre>
@@ -232,6 +232,65 @@ Selecting Outside the Scope: '':scope-context()'' pseudo-class</h4>
 		This functionality would replace ''@global'', which is a poor excuse for a selector.
 	</div>
 
+<!--
+████████  ████████ ████████    ███    ██     ██ ██       ████████
+██     ██ ██       ██         ██ ██   ██     ██ ██          ██
+██     ██ ██       ██        ██   ██  ██     ██ ██          ██
+██     ██ ██████   ██████   ██     ██ ██     ██ ██          ██
+██     ██ ██       ██       █████████ ██     ██ ██          ██
+██     ██ ██       ██       ██     ██ ██     ██ ██          ██
+████████  ████████ ██       ██     ██  ███████  ████████    ██
+-->
+
+<h2 id=''>
+Default Styles for Custom Elements</h2>
+
+	When defining <a>custom elements</a>,
+	one often wants to set up "default" styles for them,
+	akin to the user-agent styles that apply to built-in elements.
+	This is, unfortunately, hard to do in vanilla CSS,
+	due to issues of scoping and specificity--
+	the element in question might be used in <a>shadow trees</a>,
+	and thus is unreachable by any selector targeting it in the outermost document;
+	and selectors, even low-specificity ones like simple <a>type selectors</a>,
+	can accidentally override author-level styles meant to target the element.
+
+	To aid in this, this section defines a way
+	to create a stylesheet of "default element styles" for a given element.
+	This stylesheet applies across the entire document,
+	in all <a>shadow trees</a>,
+	and the rules in it apply at the <a>user agent origin</a>,
+	so author-level rules automatically win.
+
+	{{Window}}s gain a private slot <dfn attribute for=Window>\[[defaultElementStylesMap]]</dfn>
+	which is a map of <a for="Element">local names</a> to <a>stylesheets</a>.
+
+	These stylesheets must apply to every document in the window.
+	They must be interpreted as user agent stylesheets.
+
+	Note: This implies, in particular,
+	that they apply to all <a>shadow trees</a> in every document,
+	and that the declarations in them are from the <a>user agent origin</a>.
+
+	For the purpose of the <a>cascade</a>,
+	these stylesheets are ordered after the user agent's own stylesheets;
+	their relative ordering doesn't matter as it is not observable.
+
+	Within these stylesheets, <a>complex selectors</a> must be treated as invalid.
+	Every <a>compound selector</a> must be treated as containing an additional <a>type selector</a>
+	that selects elements with the <a for=Element>local name</a>
+	that the stylesheet is keyed with.
+
+	Issue: Do we need to restrict the <a>at-rules</a> that can be used in these sheets?
+	For example, do we allow an ''@font-face''?
+	I'm going to leave it as allowed unless/until I hear complaints.
+
+	This specification does not define how to add to, remove from, or generally manipulate
+	the {{[[defaultElementStylesMap]]}}.
+	It is expected that other specifications,
+	such as [[DOM]],
+	will define ways to do so.
+
 <!--
  ██████  ██     ██    ███    ████████   ███████  ██      ██
 ██    ██ ██     ██   ██ ██   ██     ██ ██     ██ ██  ██  ██
@@ -606,7 +665,15 @@ Shadow Trees and the Cascade</h3>
 
 		Note: This is the <em>opposite</em> of how scoped styles work.
 
-<!-- Big Text: Flat Tree -->
+<!--
+████████ ██          ███    ████████       ████████ ████████  ████████ ████████
+██       ██         ██ ██      ██             ██    ██     ██ ██       ██
+██       ██        ██   ██     ██             ██    ██     ██ ██       ██
+██████   ██       ██     ██    ██             ██    ████████  ██████   ██████
+██       ██       █████████    ██             ██    ██   ██   ██       ██
+██       ██       ██     ██    ██             ██    ██    ██  ██       ██
+██       ████████ ██     ██    ██             ██    ██     ██ ████████ ████████
+-->
 
 <h3 id='flattening' algorithm>
 Flattening the DOM into an Element Tree</h3>