From 9bc4470cd7b26f52cf0d7b5cb8e54569ecb48fd9 Mon Sep 17 00:00:00 2001 From: Rakina Zata Amni Date: Wed, 17 Oct 2018 21:07:55 +0900 Subject: [PATCH 1/2] Use FrozenArray instead of StyleSheetList --- explainer.md | 14 ++++++-------- index.bs | 15 +++------------ index.html | 47 +++++++++++------------------------------------ 3 files changed, 20 insertions(+), 56 deletions(-) diff --git a/explainer.md b/explainer.md index 0bb4d95..51bfb8a 100644 --- a/explainer.md +++ b/explainer.md @@ -40,10 +40,10 @@ let someStyleSheet = document.createCSSStyleSheetSync("hr { color: green}"); let anotherStyleSheet = await document.createCSSStyleSheet("@import fancystyle.css") // Apply style sheet in custom element constructor. -shadowRoot.adoptedStyleSheets = new StyleSheetList([someStyleSheet, anotherStyleSheet]); +shadowRoot.adoptedStyleSheets = [someStyleSheet, anotherStyleSheet]; // Apply style sheet in top level document. -document.adoptedStyleSheets = new StyleSheetList([someStyleSheet]); +document.adoptedStyleSheets = [someStyleSheet]; ``` ### Behavior @@ -55,21 +55,19 @@ document.adoptedStyleSheets = new StyleSheetList([someStyleSheet]);
some div
``` * After a stylesheet is added to `DocumentOrShadowRoot`s, changes made to the stylesheet will also reflect in those `DocumentOrShadowRoot`s. * Example: ```js let sheet = document.createCSSStyleSheetSync("* { color: red; })"); - document.adoptedStyleSheets = new StyleSheetList([sheet]); + document.adoptedStyleSheets = [sheet]; sheet.insertRule("* { background-color: blue; }"); // Now document will have blue background color as well. ``` diff --git a/index.bs b/index.bs index 121ce7f..be5be8a 100644 --- a/index.bs +++ b/index.bs @@ -123,20 +123,16 @@ Using Constructed Stylesheets {#using-constructed-stylesheets} ============================= A {{CSSStyleSheet}} can only be applied to the {{Document}} it is constructed on (e.g. the document on which the factory function is called on), -and any {{ShadowRoot}} in the {{Document}} it is constructed on, by adding a {{StyleSheetList}} containing the sheet to their {{adoptedStyleSheets}}. +and any {{ShadowRoot}} in the {{Document}} it is constructed on, by adding an array containing the sheet to their {{adoptedStyleSheets}}. So, a stylesheet can be used in multiple {{DocumentOrShadowRoot}}s within the document it is constructed on. Non-explicitly constructed stylesheets cannot be added to {{adoptedStyleSheets}}. -If {{adoptedStyleSheets}} got assigned a {{StyleSheetList}} that contains style sheets not made by {{createCSSStyleSheet(text)}} or {{createEmptyCSSStyleSheet}}, +If {{adoptedStyleSheets}} got assigned an array that contains style sheets not made by {{createCSSStyleSheet(text)}}, {{createCSSStyleSheetSync(text)}} or {{createEmptyCSSStyleSheet}}, a {{TypeError}} will be thrown. 
 partial interface DocumentOrShadowRoot {
-	attribute StyleSheetList adoptedStyleSheets;
-};
-
-[Constructor(sequence<StyleSheet> sheets)]
-partial interface StyleSheetList {
+	attribute FrozenArray<CSSStyleSheet> adoptedStyleSheets;
 };
@@ -146,11 +142,6 @@ partial interface StyleSheetList { Style sheets assigned to this attribute are part of the document CSS style sheets. They are ordered after the stylesheets in {{Document/styleSheets}}. - -
StyleSheetList(sheets)
-
- Creates a {{StyleSheetList}} containing the contents of sheets. -
Applying Styles In All Contexts {#styles-in-all-contexts} diff --git a/index.html b/index.html index 26c13d1..034adbd 100644 --- a/index.html +++ b/index.html @@ -1460,7 +1460,7 @@

Constructable Stylesheet Objects

-

A Collection of Interesting Ideas,

+

A Collection of Interesting Ideas,

This version: @@ -1474,7 +1474,7 @@

CC0 To the extent possible under law, the editors have waived all copyright and related or neighboring rights to this work. -In addition, as of 16 October 2018, +In addition, as of 17 October 2018, the editors have made this specification available under the Open Web Foundation Agreement Version 1.0, which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0. Parts of this work may be from another specification document. If so, those parts are instead covered by the license of that specification document.

@@ -1627,25 +1627,19 @@

2. Using Constructed Stylesheets

A CSSStyleSheet can only be applied to the Document it is constructed on (e.g. the document on which the factory function is called on), -and any ShadowRoot in the Document it is constructed on, by adding a StyleSheetList containing the sheet to their adoptedStyleSheets. +and any ShadowRoot in the Document it is constructed on, by adding an array containing the sheet to their adoptedStyleSheets. So, a stylesheet can be used in multiple DocumentOrShadowRoots within the document it is constructed on.

Non-explicitly constructed stylesheets cannot be added to adoptedStyleSheets. -If adoptedStyleSheets got assigned a StyleSheetList that contains style sheets not made by createCSSStyleSheet(text) or createEmptyCSSStyleSheet, +If adoptedStyleSheets got assigned an array that contains style sheets not made by createCSSStyleSheet(text), createCSSStyleSheetSync(text) or createEmptyCSSStyleSheet, a TypeError will be thrown.

partial interface DocumentOrShadowRoot {
-  attribute StyleSheetList adoptedStyleSheets;
-};
-
-[Constructor(sequence<StyleSheet> sheets)]
-partial interface StyleSheetList {
+  attribute FrozenArray<CSSStyleSheet> adoptedStyleSheets;
 };
-
adoptedStyleSheets, of type StyleSheetList +
adoptedStyleSheets, of type FrozenArray<CSSStyleSheet>
Style sheets assigned to this attribute are part of the document CSS style sheets. They are ordered after the stylesheets in styleSheets. -
StyleSheetList(sheets) -
Creates a StyleSheetList containing the contents of sheets.

3. Applying Styles In All Contexts

@@ -1809,8 +1803,6 @@

CSSStyleSheetInit, in §1
  • disabled, in §1
  • media, in §1 -
  • StyleSheetList(sheets)), in §2 -
  • StyleSheetList(sheets), in §2
  • title, in §1 - -