Overview.bs

<pre class='metadata'>
Title: CSS Scoping Module Level 2
Level: 2
Shortname: css-scoping
Group: CSSWG
Status: ED
Work Status: Exploring
TR: https://www.w3.org/TR/css-scoping-1/
ED: https://drafts.csswg.org/css-scoping/
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
Editor: Miriam E. Suzanne, Invited Expert, http://miriamsuzanne.com/contact, w3cid 117151
Abstract: This specification defines scoping/encapsulation mechanisms for CSS.
Ignored Terms: inherit, slot, custom elements, stylesheets
Ignored Vars: root elements
</pre>

<pre class="link-defaults">
spec:dom; type:dfn;
	text:host
	text:shadow root; for:/
	text:root; for:tree
	text:find slottables
	text:find flattened slottables
	text:element; for:/
spec:html; type:element; text:style
spec:selectors-4; type:dfn;
	text: static profile
	text: dynamic profile
spec:css-pseudo-4; type:selector;
	text:::before
	text:::after
spec:cascade-4; type:dfn; text: inherit
</pre>

<h2 id="intro">
Introduction</h2>

	Issue: This is a diff spec over <a href="https://www.w3.org/TR/css-scoping-1/">CSS Scoping Module Level 1</a>.
	It is currently an Exploratory Working Draft:
	if you are implementing anything, please use Level 1 as a reference.
	We will merge the Level 1 text into this draft once it reaches CR.


<!--
████████  ████████ ████████    ███    ██     ██ ██       ████████
██     ██ ██       ██         ██ ██   ██     ██ ██          ██
██     ██ ██       ██        ██   ██  ██     ██ ██          ██
██     ██ ██████   ██████   ██     ██ ██     ██ ██          ██
██     ██ ██       ██       █████████ ██     ██ ██          ██
██     ██ ██       ██       ██     ██ ██     ██ ██          ██
████████  ████████ ██       ██     ██  ███████  ████████    ██
-->

<h2 id='default-element-styles'>
Default Styles for Custom Elements</h2>

	Issue: [[css-scoping-1#default-element-styles]]

<!--
 ██████  ██     ██    ███    ████████   ███████  ██      ██
██    ██ ██     ██   ██ ██   ██     ██ ██     ██ ██  ██  ██
██       ██     ██  ██   ██  ██     ██ ██     ██ ██  ██  ██
 ██████  █████████ ██     ██ ██     ██ ██     ██ ██  ██  ██
      ██ ██     ██ █████████ ██     ██ ██     ██ ██  ██  ██
██    ██ ██     ██ ██     ██ ██     ██ ██     ██ ██  ██  ██
 ██████  ██     ██ ██     ██ ████████   ███████   ███  ███
-->

<h2 id='shadow-dom'>
Shadow Encapsulation</h2>

	Issue: [[css-scoping-1#shadow-dom]]

<!--
 ██████   ██████   ███████  ████████  ████ ██    ██  ██████
██    ██ ██    ██ ██     ██ ██     ██  ██  ███   ██ ██    ██
██       ██       ██     ██ ██     ██  ██  ████  ██ ██
 ██████  ██       ██     ██ ████████   ██  ██ ██ ██ ██   ████
      ██ ██       ██     ██ ██         ██  ██  ████ ██    ██
██    ██ ██    ██ ██     ██ ██         ██  ██   ███ ██    ██
 ██████   ██████   ███████  ██        ████ ██    ██  ██████
-->

<h2 id='scope'>
Scoped Styles</h2>

	Issue: Introduce scoped styles

<!--
 ███████   ██████   ██████   ███████  ████████  ████████
██     ██ ██    ██ ██    ██ ██     ██ ██     ██ ██
██ ███ ██ ██       ██       ██     ██ ██     ██ ██
██ ███ ██  ██████  ██       ██     ██ ████████  ██████
██ █████        ██ ██       ██     ██ ██        ██
██        ██    ██ ██    ██ ██     ██ ██        ██
 ███████   ██████   ██████   ███████  ██        ████████
-->

<h3 id='scope-atrule'>
Scoping Styles in CSS: the ''@scope'' rule</h3>

	The <dfn>@scope</dfn> at-rule allows authors to create scoped style rules using CSS syntax.
	The syntax of the ''@scope'' rule is:

	<pre class='prod'>
	@scope (<<selector-list>>) [to (<<selector-list>>)]? {
		<<stylesheet>>
	}
	</pre>

	Issue: Define the ''@scope'' rule
	Issue: Define scope proximity in the cascade (cross-reference css-cascade)

<h3 id='in-scope-selector'>
Selecting inside a scope: the '':in-scope'' pseudo-class</h3>

	The <dfn>:in-scope</dfn> pseudo-class allows authors to
	select elements that are within a given scope.

	Issue: Define an '':in-scope'' selector (cross-reference css-selectors)

<h2 id="changes">
Changes</h2>

<h3 id="additions-l">
Additions Since Level 1</h3>

	The following features have been added since
	<a href="https://www.w3.org/TR/css-scoping-1/">Level 1</a>:

	* The ''@scope'' rule
	* The '':in-scope()'' pseudo-class

Privacy and Security Considerations {#priv-sec}
===============================================

This specification introduces Shadow DOM and some shadow-piercing capabilities,
but this does not introduce any privacy or security issues--
shadow DOM, as currently specified, is intentionally not a privacy/security boundary
(and the parts of the UA that use shadow DOM and <em>do</em> have a privacy/security boundary
implicitly rely on protections not yet specified,
which protect them from the things defined in this specification).