Permalink
Browse files

Remove <style scoped>

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 authored and annevk committed May 11, 2016
1 parent 634698e commit c2a3b2a2e3db49c14b486a5e99acf7d10cfe8443
Showing with 98 additions and 146 deletions.
  1. +0 −1 images/content-venn.svg
  2. +98 −145 source
View
@@ -96,7 +96,6 @@
<li><code>small</code></li>
<li><code>span</code></li>
<li><code>strong</code></li>
<li><code>style</code>*</li>
<li><code>sub</code></li>
<li><code>sup</code></li>
<li><code>svg</code></li>
View
243 source
@@ -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>
@@ -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>
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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">
@@ -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"
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

0 comments on commit c2a3b2a

Please sign in to comment.