Skip to content

Commit

Permalink
Remove <style scoped>
Browse files Browse the repository at this point in the history 
This reverts 29cf39d and many follow-up
refinement commits due to lack of implementer interest. Most of the use
cases served by <style scoped> are better served by <style> elements
inside a shadow root (although the features do work differently, in
that shadow DOM enforces isolation from the cascade, whereas <style
scoped> does not).

Fixes #552.
  • Loading branch information
@domenic
domenic committed May 11, 2016
1 parent 634698e commit 47154b5
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 146 deletions.
1 change: 0 additions & 1 deletion images/content-venn.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
243 changes: 98 additions & 145 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10078,7 +10078,6 @@ interface <dfn>HTMLUnknownElement</dfn> : <span>HTMLElement</span> { };</pre>
<li><code>small</code></li>
<li><code>span</code></li>
<li><code>strong</code></li>
<li><code>style</code> (if the <code data-x="attr-style-scoped">scoped</code> attribute is present)</li>
<li><code>sub</code></li>
<li><code>sup</code></li>
<li><span>SVG <code>svg</code></span></li>
Expand Down Expand Up @@ -13958,27 +13957,23 @@ people expect to have work and what is necessary.
<dl class="element">
<dt><span data-x="concept-element-categories">Categories</span>:</dt>
<dd><span>Metadata content</span>.</dd>
<dd>If the <code data-x="attr-style-scoped">scoped</code> attribute is present: <span>flow content</span>.</dd>
<dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
<dd>If the <code data-x="attr-style-scoped">scoped</code> attribute is absent: where <span>metadata content</span> is expected.</dd>
<dd>If the <code data-x="attr-style-scoped">scoped</code> attribute is absent: in a <code>noscript</code> element that is a child of a <code>head</code> element.</dd>
<dd>If the <code data-x="attr-style-scoped">scoped</code> attribute is present: where <span>flow content</span> is expected, but before any other <span>flow content</span> other than <span>inter-element whitespace</span> and <code>style</code> elements, and not as the child of an element whose content model is <span>transparent</span>.</dd>
<dd>Where <span>metadata content</span> is expected.</dd>
<dd>In a <code>noscript</code> element that is a child of a <code>head</code> element.</dd>
<dt><span data-x="concept-element-content-model">Content model</span>:</dt>
<dd>Depends on the value of the <code data-x="attr-style-type">type</code> attribute, but must match requirements described in prose below.</dd>
<dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
<dd><code data-x="attr-style-media">media</code></dd>
<dd><code data-x="attr-style-nonce">nonce</code></dd>
<dd><code data-x="attr-style-type">type</code></dd>
<dd><code data-x="attr-style-scoped">scoped</code></dd>
<dd>Also, the <code data-x="attr-style-title">title</code> attribute <span data-x="attr-style-title">has special semantics</span> on this element.</dd>
<dt><span data-x="concept-element-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
<dd>
<pre class="idl">interface <dfn>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-style-media">media</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-style-nonce">nonce</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-style-type">type</span>;
[<span>CEReactions</span>] attribute boolean <span data-x="dom-style-scoped">scoped</span>;
};
<span>HTMLStyleElement</span> implements <span>LinkStyle</span>;</pre>
</dd>
Expand Down Expand Up @@ -14028,32 +14023,6 @@ people expect to have work and what is necessary.
to determine whether or not the style specified by an element will be applied to the document. The
value is text. <ref spec="CSP"></p>

<p>The <dfn><code data-x="attr-style-scoped">scoped</code></dfn> attribute is a <span>boolean
attribute</span>. If present, it indicates that the styles are intended just for the subtree
rooted at the <code>style</code> element's parent element, as opposed to the whole
<code>Document</code>.</p>

<p>If the <code data-x="attr-style-scoped">scoped</code> attribute is present and the element has a
parent element, then the <code>style</code> element must precede any <span>flow content</span> in
its parent element other than <span>inter-element whitespace</span> and other <code>style</code>
elements, and the parent element's content model must not have a <span>transparent</span>
component.</p>

<p class="note">This implies that scoped <code>style</code> elements cannot be children of, e.g.,
<code>a</code> or <code>ins</code> elements, even when those are used as <span>flow content</span>
containers.</p>

<p class="note">A <code>style</code> element <em>without</em> a <code
data-x="attr-style-scoped">scoped</code> attribute is restricted to appearing in the
<code>head</code> of the document.</p>

<p>A style sheet declared by a <code>style</code> element that has a <code
data-x="attr-style-scoped">scoped</code> attribute and has a parent node that is an element is
<i>scoped</i>, with the <i>scoping root</i> being the <code>style</code> element's parent
element. <ref spec=CSSSCOPED></p>

<!-- <p class="note">Currently, this is only defined for CSS.</p> -->

<p id="title-on-style">The <dfn><code data-x="attr-style-title">title</code></dfn> attribute on
<code>style</code> elements defines <span>alternative style sheet sets</span>. If the
<code>style</code> element has no <code data-x="attr-style-title">title</code> attribute, then it
Expand Down Expand Up @@ -14225,9 +14194,9 @@ c-end = "-->"</pre>
<div w-nodev>

<p>The <dfn><code data-x="dom-style-media">media</code></dfn>, <dfn><code
data-x="dom-style-nonce">nonce</code></dfn>, <dfn><code data-x="dom-style-type">type</code></dfn>
and <dfn><code data-x="dom-style-scoped">scoped</code></dfn> IDL attributes must
<span>reflect</span> the respective content attributes of the same name.</p>
data-x="dom-style-nonce">nonce</code></dfn>, and <dfn><code
data-x="dom-style-type">type</code></dfn> IDL attributes must <span>reflect</span> the respective
content attributes of the same name.</p>

</div>

Expand Down Expand Up @@ -14520,25 +14489,24 @@ c-end = "-->"</pre>

<div class="example">

<p>In this example, <code>article</code> elements are used to host widgets on a portal page.</p>
<p>In this example, <code>article</code> elements are used to host widgets on a portal page. The
widgets are implemented as <span data-x="customized built-in element">customized built-in
elements</span> in order to get specific styling and scripted behavior.</p>

<pre>&lt;!DOCTYPE HTML>
&lt;html lang=en>
&lt;title>eHome Portal&lt;/title>
&lt;script src="/scripts/widgets.css">
&lt;link rel=stylesheet href="/styles/main.css">
&lt;article>
&lt;style scoped> @import url(/widgets/stocks/look.css); &lt;/style>
&lt;script src="/widgets/stocks/core.js">&lt;/script>
&lt;article is="stock-widget">
&lt;h1>Stocks&lt;/h1>
&lt;table>
&lt;thead> &lt;tr> &lt;th> Stock &lt;th> Value &lt;th> Delta
&lt;tbody> &lt;template> &lt;tr> &lt;td> &lt;td> &lt;td> &lt;/template>
&lt;/table>
&lt;p> &lt;input type=button value="Refresh" onclick="stocks.refresh()">
&lt;p> &lt;input type=button value="Refresh" onclick="this.parentElement.refresh()">
&lt;/article>
&lt;article>
&lt;style scoped> @import url(/widgets/news/look.css); &lt;/style>
&lt;script src="/widgets/news/core.js">&lt;/script>
&lt;article is="news-widget">
&lt;h1>News&lt;/h1>
&lt;ul>
&lt;template>
Expand All @@ -14547,7 +14515,7 @@ c-end = "-->"</pre>
&lt;p>
&lt;/template>
&lt;/ul>
&lt;p> &lt;input type=button value="Refresh" onclick="news.refresh()">
&lt;p> &lt;input type=button value="Refresh" onclick="this.parentElement.refresh()">
&lt;/article></pre>

</div>
Expand Down Expand Up @@ -14673,48 +14641,44 @@ c-end = "-->"</pre>
<div class="example">

<p>In this example, a book author has marked up some sections as chapters and some as appendices,
and uses CSS to style the headers in these two classes of section differently. The whole book is
wrapped in an <code>article</code> element as part of an even larger document containing other
books.</p>

<pre>&lt;article class="book">
&lt;style>
section { border: double medium; margin: 2em; }
section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
&lt;/style>
&lt;header>
&lt;hgroup>
&lt;h1>My Book&lt;/h1>
&lt;h2>A sample with not much content&lt;/h2>
&lt;/hgroup>
&lt;p>&lt;small>Published by Dummy Publicorp Ltd.&lt;/small>&lt;/p>
&lt;/header>
&lt;section class="chapter">
&lt;h1>My First Chapter&lt;/h1>
&lt;p>This is the first of my chapters. It doesn't say much.&lt;/p>
&lt;p>But it has two paragraphs!&lt;/p>
&lt;/section>
&lt;section class="chapter">
&lt;h1>It Continues: The Second Chapter&lt;/h1>
&lt;p>Bla dee bla, dee bla dee bla. Boom.&lt;/p>
&lt;/section>
&lt;section class="chapter">
&lt;h1>Chapter Three: A Further Example&lt;/h1>
&lt;p>It's not like a battle between brightness and earthtones would go
unnoticed.&lt;/p>
&lt;p>But it might ruin my story.&lt;/p>
&lt;/section>
&lt;section class="appendix">
&lt;h1>Appendix A: Overview of Examples&lt;/h1>
&lt;p>These are demonstrations.&lt;/p>
&lt;/section>
&lt;section class="appendix">
&lt;h1>Appendix B: Some Closing Remarks&lt;/h1>
&lt;p>Hopefully this long example shows that you &lt;em>can&lt;/em> style
sections, so long as they are used to indicate actual sections.&lt;/p>
&lt;/section>
&lt;/article></pre>
and uses CSS to style the headers in these two classes of section differently.</p>

<pre>&lt;style>
section { border: double medium; margin: 2em; }
section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
&lt;/style>
&lt;header>
&lt;hgroup>
&lt;h1>My Book&lt;/h1>
&lt;h2>A sample with not much content&lt;/h2>
&lt;/hgroup>
&lt;p>&lt;small>Published by Dummy Publicorp Ltd.&lt;/small>&lt;/p>
&lt;/header>
&lt;section class="chapter">
&lt;h1>My First Chapter&lt;/h1>
&lt;p>This is the first of my chapters. It doesn't say much.&lt;/p>
&lt;p>But it has two paragraphs!&lt;/p>
&lt;/section>
&lt;section class="chapter">
&lt;h1>It Continues: The Second Chapter&lt;/h1>
&lt;p>Bla dee bla, dee bla dee bla. Boom.&lt;/p>
&lt;/section>
&lt;section class="chapter">
&lt;h1>Chapter Three: A Further Example&lt;/h1>
&lt;p>It's not like a battle between brightness and earthtones would go
unnoticed.&lt;/p>
&lt;p>But it might ruin my story.&lt;/p>
&lt;/section>
&lt;section class="appendix">
&lt;h1>Appendix A: Overview of Examples&lt;/h1>
&lt;p>These are demonstrations.&lt;/p>
&lt;/section>
&lt;section class="appendix">
&lt;h1>Appendix B: Some Closing Remarks&lt;/h1>
&lt;p>Hopefully this long example shows that you &lt;em>can&lt;/em> style
sections, so long as they are used to indicate actual sections.&lt;/p>
&lt;/section></pre>

</div>

Expand Down Expand Up @@ -20669,18 +20633,18 @@ end.&lt;/code>&lt;/pre></pre>
text that was originally not emphasized. In this example, common typographic conventions have led
the author to explicitly style <code>mark</code> elements in quotes to render in italics.</p>

<pre>&lt;article>
&lt;style scoped>
blockquote mark, q mark {
font: inherit; font-style: italic;
text-decoration: none;
background: transparent; color: inherit;
}
.bubble em {
font: inherit; font-size: larger;
text-decoration: underline;
}
&lt;/style>
<pre>&lt;style>
blockquote mark, q mark {
font: inherit; font-style: italic;
text-decoration: none;
background: transparent; color: inherit;
}
.bubble em {
font: inherit; font-size: larger;
text-decoration: underline;
}
&lt;/style>
&lt;article>
&lt;h1>She knew&lt;/h1>
&lt;p>Did you notice the subtle joke in the joke on panel 4?&lt;/p>
&lt;blockquote>
Expand Down Expand Up @@ -24345,11 +24309,11 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>
for the image when the image is loading. To avoid the layout having to be reflowed multiple times
as the page is loading, CSS and CSS media queries can be used to provide the dimensions:</p>

<pre>&lt;figure>
&lt;style scoped>
#a { width: 300px; height: 150px; }
@media (max-width: 600px) { #a { width: 100px; height: 100px; } }
&lt;/style>
<pre>&lt;style>
#a { width: 300px; height: 150px; }
@media (max-width: 600px) { #a { width: 100px; height: 100px; } }
&lt;/style>
&lt;figure>
&lt;picture>
&lt;source srcset="a-square.png" media="(max-width: 600px)">
&lt;img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses." id="a">
Expand All @@ -24361,10 +24325,10 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</pre>
data-x="attr-dim-height">height</code> attributes can be used to provide the width for legacy user
agents, using CSS just for the user agents that support <code>picture</code>:</p>

<pre>&lt;figure>
&lt;style scoped media="(max-width: 600px)">
#a { width: 100px; height: 100px; }
&lt;/style>
<pre>&lt;style media="(max-width: 600px)">
#a { width: 100px; height: 100px; }
&lt;/style>
&lt;figure>
&lt;picture>
&lt;source srcset="a-square.png" media="(max-width: 600px)">
&lt;img src="a-rectangle.png" width="300" height="150"
Expand Down Expand Up @@ -37731,31 +37695,30 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
<p>Here is an example of a table being used to mark up a Sudoku puzzle. Observe the lack of
headers, which are not necessary in such a table.</p>

<pre>&lt;section>
&lt;style scoped>
table { border-collapse: collapse; border: solid thick; }
colgroup, tbody { border: solid medium; }
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
&lt;/style>
&lt;h1>Today's Sudoku&lt;/h1>
&lt;table>
&lt;colgroup>&lt;col>&lt;col>&lt;col>
&lt;colgroup>&lt;col>&lt;col>&lt;col>
&lt;colgroup>&lt;col>&lt;col>&lt;col>
&lt;tbody>
&lt;tr> &lt;td> 1 &lt;td> &lt;td> 3 &lt;td> 6 &lt;td> &lt;td> 4 &lt;td> 7 &lt;td> &lt;td> 9
&lt;tr> &lt;td> &lt;td> 2 &lt;td> &lt;td> &lt;td> 9 &lt;td> &lt;td> &lt;td> 1 &lt;td>
&lt;tr> &lt;td> 7 &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> 6
&lt;tbody>
&lt;tr> &lt;td> 2 &lt;td> &lt;td> 4 &lt;td> &lt;td> 3 &lt;td> &lt;td> 9 &lt;td> &lt;td> 8
&lt;tr> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td>
&lt;tr> &lt;td> 5 &lt;td> &lt;td> &lt;td> 9 &lt;td> &lt;td> 7 &lt;td> &lt;td> &lt;td> 1
&lt;tbody>
&lt;tr> &lt;td> 6 &lt;td> &lt;td> &lt;td> &lt;td> 5 &lt;td> &lt;td> &lt;td> &lt;td> 2
&lt;tr> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> 7 &lt;td> &lt;td> &lt;td> &lt;td>
&lt;tr> &lt;td> 9 &lt;td> &lt;td> &lt;td> 8 &lt;td> &lt;td> 2 &lt;td> &lt;td> &lt;td> 5
&lt;/table>
&lt;/section></pre>
<pre>&lt;style>
#sudoku { border-collapse: collapse; border: solid thick; }
#sudoku colgroup, table#sudoku tbody { border: solid medium; }
#sudoku td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
&lt;/style>
&lt;h1>Today's Sudoku&lt;/h1>
&lt;table id="sudoku">
&lt;colgroup>&lt;col>&lt;col>&lt;col>
&lt;colgroup>&lt;col>&lt;col>&lt;col>
&lt;colgroup>&lt;col>&lt;col>&lt;col>
&lt;tbody>
&lt;tr> &lt;td> 1 &lt;td> &lt;td> 3 &lt;td> 6 &lt;td> &lt;td> 4 &lt;td> 7 &lt;td> &lt;td> 9
&lt;tr> &lt;td> &lt;td> 2 &lt;td> &lt;td> &lt;td> 9 &lt;td> &lt;td> &lt;td> 1 &lt;td>
&lt;tr> &lt;td> 7 &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> 6
&lt;tbody>
&lt;tr> &lt;td> 2 &lt;td> &lt;td> 4 &lt;td> &lt;td> 3 &lt;td> &lt;td> 9 &lt;td> &lt;td> 8
&lt;tr> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td>
&lt;tr> &lt;td> 5 &lt;td> &lt;td> &lt;td> 9 &lt;td> &lt;td> 7 &lt;td> &lt;td> &lt;td> 1
&lt;tbody>
&lt;tr> &lt;td> 6 &lt;td> &lt;td> &lt;td> &lt;td> 5 &lt;td> &lt;td> &lt;td> &lt;td> 2
&lt;tr> &lt;td> &lt;td> &lt;td> &lt;td> &lt;td> 7 &lt;td> &lt;td> &lt;td> &lt;td>
&lt;tr> &lt;td> 9 &lt;td> &lt;td> &lt;td> 8 &lt;td> &lt;td> 2 &lt;td> &lt;td> &lt;td> 5
&lt;/table>
</pre>

</div>

Expand Down Expand Up @@ -114753,8 +114716,7 @@ interface <dfn>External</dfn> {
<td><span data-x="global attributes">globals</span>;
<code data-x="attr-style-media">media</code>;
<code data-x="attr-style-nonce">nonce</code>;
<code data-x="attr-style-type">type</code>;
<code data-x="attr-style-scoped">scoped</code></td>
<code data-x="attr-style-type">type</code></td>
<td><code>HTMLStyleElement</code></td>
</tr>

Expand Down Expand Up @@ -115213,8 +115175,7 @@ interface <dfn>External</dfn> {
<td>
<code>area</code> (if it is a descendant of a <code>map</code> element);
<code>link</code> (if it is <span>allowed in the body</span>);
<code>meta</code> (if the <code data-x="attr-itemprop">itemprop</code> attribute is present);
<code>style</code> (if the <code data-x="attr-style-scoped">scoped</code> attribute is present)
<code>meta</code> (if the <code data-x="attr-itemprop">itemprop</code> attribute is present)

<tr>
<td> <span>Sectioning content</span>
Expand Down Expand Up @@ -116234,11 +116195,6 @@ interface <dfn>External</dfn> {
"<code data-x="attr-th-scope-col">col</code>";
"<code data-x="attr-th-scope-rowgroup">rowgroup</code>";
"<code data-x="attr-th-scope-colgroup">colgroup</code>"
<tr>
<th> <code data-x="">scoped</code>
<td> <code data-x="attr-style-scoped">style</code>
<td> Whether the styles apply to the entire document or just the parent subtree
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">selected</code>
<td> <code data-x="attr-option-selected">option</code>
Expand Down Expand Up @@ -118059,9 +118015,6 @@ INSERT INTERFACES HERE
<dt id="refsCSSUI">[CSSUI]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-ui/">CSS3 Basic User Interface Module</a></cite>, T. &Ccedil;elik. W3C.</dd>

<dt id="refsCSSSCOPED">[CSSSCOPED]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-scoping/">CSS Scoping</a></cite>, T. Atkins, E. Etemad. W3C.</dd>

<dt id="refsCSSSYNTAX">[CSSSYNTAX]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-syntax/">CSS Syntax</a></cite>, T. Atkins, S. Sapin. W3C.</dd>

Expand Down

0 comments on commit 47154b5

Please sign in to comment.