Skip to content

Commit cb5d4c7

Browse files
tabatkinstabatkins
committed
[css-scoping] Define a better intro.
1 parent ae7a08a commit cb5d4c7

2 files changed

Lines changed: 46 additions & 4 deletions

File tree

‎css-scoping/Overview.bs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,27 @@ Scoping Mechanisms</h3>
3939
Style rules can be scoped using constructs defined in the document language
4040
or using the ''@scope'' rule in CSS.
4141

42+
“Scoping” consists of three somewhat independent concepts,
43+
which are in practice generally used together:
44+
45+
<ul>
46+
<li>
47+
A declaration can be scoped to <a>scoping root</a>,
48+
which <a href="http://dev.w3.org/csswg/css-cascade/#cascade-scope">affects its cascading behavior</a>. [[!CSS3CASCADE]]
49+
(Alternately, a style rule can be scoped to <a>scoping root</a>,
50+
which scopes all of the declarations it contains to that <a>scoping root</a>.)
51+
52+
<li>
53+
A selector can be either <a>scope-contained</a> or <a>scope-filtered</a> to a <a>scoping root</a>,
54+
which <a href="http://dev.w3.org/csswg/selectors/#evaluating-selectors">limits what elements it is allowed to match</a>. [[!SELECTORS4]]
55+
56+
<li>
57+
The '':scope'' pseudo-class matches whatever the context sets as the <a>:scope elements</a>,
58+
and is used by several features, such as relative selectors.
59+
In the absence of any anything explicitly setting the <a>:scope elements</a> to something,
60+
the '':scope'' pseudo-class matches the selector's <a>scoping root</a>.
61+
</ul>
62+
4263
<h4 id='scoping-markup'>
4364
Document Markup for Scoping</h4>
4465

‎css-scoping/Overview.html‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>CSS Scoping Module Level 1</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20140407>7 April 2014</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20140409>9 April 2014</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-scoping/>http://dev.w3.org/csswg/css-scoping/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-scoping-1/>http://www.w3.org/TR/css-scoping-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-scoping/>http://dev.w3.org/csswg/css-scoping/</a>
5959
<dt>Feedback:</dt>
6060
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-scoping%5D%20feedback">www-style@w3.org</a>
@@ -115,7 +115,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
115115
<li><a href=#scope-atrule><span class=secno>2.1.2</span> CSS Syntax for Scoping: the <a class=css data-link-type=maybe href=#at-ruledef-scope title=@scope>@scope</a> rule</a></ul>
116116
<li><a href=#scoping-context><span class=secno>2.2</span> Querying the Scoping Context</a>
117117
<ul class=toc>
118-
<li><a href=#scope-pseudo><span class=secno>2.2.1</span> Selecting the Scoping Root: <a class=css data-link-type=maybe href=http://www.w3.org/TR/selectors4/#scope-pseudo title=:scope>:scope</a> pseudo-class</a>
118+
<li><a href=#scope-pseudo><span class=secno>2.2.1</span> Selecting the Scoping Root: <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#scope-pseudo title=:scope>:scope</a> pseudo-class</a>
119119
<li><a href=#scope-content-pseudo><span class=secno>2.2.2</span> Selecting Outside the Scope: <span class=css data-link-type=maybe title=:scope-context()>:scope-context()</span> pseudo-class</a></ul></ul>
120120
<li><a href=#shadow-dom><span class=secno>3</span> Shadow Encapsulation</a>
121121
<ul class=toc>
@@ -177,6 +177,27 @@ <h3 class="heading settled heading" data-level=2.1 id=scoping-mechanisms><span c
177177
<p> Style rules can be scoped using constructs defined in the document language
178178
or using the <a class=css data-link-type=maybe href=#at-ruledef-scope title=@scope>@scope</a> rule in CSS.
179179

180+
<p> “Scoping” consists of three somewhat independent concepts,
181+
which are in practice generally used together:
182+
183+
<p> <ul>
184+
<li>
185+
A declaration can be scoped to <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a>,
186+
which <a href=http://dev.w3.org/csswg/css-cascade/#cascade-scope>affects its cascading behavior</a>. <a data-biblio-type=normative data-link-type=biblio href=#css3cascade title=css3cascade>[CSS3CASCADE]</a>
187+
(Alternately, a style rule can be scoped to <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a>,
188+
which scopes all of the declarations it contains to that <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a>.)
189+
190+
<li>
191+
A selector can be either <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scope-contained- title=scope-contained>scope-contained</a> or <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scope-filtered- title=scope-filtered>scope-filtered</a> to a <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a>,
192+
which <a href=http://dev.w3.org/csswg/selectors/#evaluating-selectors>limits what elements it is allowed to match</a>. <a data-biblio-type=normative data-link-type=biblio href=#selectors4 title=selectors4>[SELECTORS4]</a>
193+
194+
<li>
195+
The <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#scope-pseudo title=:scope>:scope</a> pseudo-class matches whatever the context sets as the <a data-link-type=dfn title=":scope elements">:scope elements</a>,
196+
and is used by several features, such as relative selectors.
197+
In the absence of any anything explicitly setting the <a data-link-type=dfn title=":scope elements">:scope elements</a> to something,
198+
the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#scope-pseudo title=:scope>:scope</a> pseudo-class matches the selector’s <a data-link-type=dfn href=http://dev.w3.org/csswg/selectors-4/#scoping-root title="scoping root">scoping root</a>.
199+
</ul>
200+
180201
<h4 class="heading settled heading" data-level=2.1.1 id=scoping-markup><span class=secno>2.1.1 </span><span class=content>
181202
Document Markup for Scoping</span><a class=self-link href=#scoping-markup></a></h4>
182203

@@ -1013,11 +1034,11 @@ <h2 class="no-num no-ref heading settled heading" id=references><span class=cont
10131034

10141035
<h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
10151036
Normative References</span><a class=self-link href=#normative></a></h3>
1016-
<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3cascade title=CSS3CASCADE><a class=self-link href=#css3cascade></a>[CSS3CASCADE]<dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>CSS Cascading and Inheritance Level 3</a>. 3 October 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/</a><dt id=dom title=DOM><a class=self-link href=#dom></a>[DOM]<dd>Anne van Kesteren; Aryeh Gregor; Ms2ger. <a href=http://dom.spec.whatwg.org/>DOM Living Standard</a>. WHATWG Living Standard. (Work in progress.) URL: <a href=http://dom.spec.whatwg.org/>http://dom.spec.whatwg.org/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a></dl></div>
1037+
<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3cascade title=CSS3CASCADE><a class=self-link href=#css3cascade></a>[CSS3CASCADE]<dd>Håkon Wium Lie; Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>CSS Cascading and Inheritance Level 3</a>. 3 October 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/>http://www.w3.org/TR/2013/CR-css-cascade-3-20131003/</a><dt id=dom title=DOM><a class=self-link href=#dom></a>[DOM]<dd>Anne van Kesteren; Aryeh Gregor; Ms2ger. <a href=http://dom.spec.whatwg.org/>DOM Living Standard</a>. WHATWG Living Standard. (Work in progress.) URL: <a href=http://dom.spec.whatwg.org/>http://dom.spec.whatwg.org/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=selectors4 title=SELECTORS4><a class=self-link href=#selectors4></a>[SELECTORS4]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/>Selectors Level 4</a>. 2 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/>http://www.w3.org/TR/2013/WD-selectors4-20130502/</a></dl></div>
10171038

10181039
<h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
10191040
Informative References</span><a class=self-link href=#informative></a></h3>
1020-
<div data-fill-with=informative-references><dl><dt id=html title=HTML><a class=self-link href=#html></a>[HTML]<dd>Ian Hickson. <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/>HTML</a>. Living Standard. URL: <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/>http://www.whatwg.org/specs/web-apps/current-work/multipage/</a><dt id=selectors4 title=SELECTORS4><a class=self-link href=#selectors4></a>[SELECTORS4]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/>Selectors Level 4</a>. 2 May 2013. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/WD-selectors4-20130502/>http://www.w3.org/TR/2013/WD-selectors4-20130502/</a></dl></div>
1041+
<div data-fill-with=informative-references><dl><dt id=html title=HTML><a class=self-link href=#html></a>[HTML]<dd>Ian Hickson. <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/>HTML</a>. Living Standard. URL: <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/>http://www.whatwg.org/specs/web-apps/current-work/multipage/</a></dl></div>
10211042

10221043
<h2 class="no-num no-ref heading settled heading" id=index><span class=content>
10231044
Index</span><a class=self-link href=#index></a></h2>

0 commit comments

Comments
 (0)