Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use FrozenArray instead of StyleSheetList #40

Merged
merged 2 commits into from Oct 17, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 6 additions & 8 deletions explainer.md
Expand Up @@ -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
Expand All @@ -55,21 +55,19 @@ document.adoptedStyleSheets = new StyleSheetList([someStyleSheet]);
<div id="someDiv">some div</div>
</body>
<script>
let sheetList = new StyleSheetList([
document.createCSSStyleSheetSync("* { color: red; })")
]);
let sheet = document.createCSSStyleSheetSync("* { color: red; })");
// this will fail
someFrame.contentDocument.adoptedStyleSheets = sheetList;
someFrame.contentDocument.adoptedStyleSheets = [sheet];
// this will work
let shadowRoot = someDiv.attachShadow({mode: "open"});
shadowRoot.adoptedStyleSheets = sheetList;
shadowRoot.adoptedStyleSheets = [sheet];
</script>
```
* 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.
```
Expand Down
15 changes: 3 additions & 12 deletions index.bs
Expand Up @@ -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 assigning 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.

<pre class='idl'>
partial interface DocumentOrShadowRoot {
attribute StyleSheetList adoptedStyleSheets;
};

[Constructor(sequence&lt;StyleSheet> sheets)]
partial interface StyleSheetList {
attribute FrozenArray&lt;CSSStyleSheet> adoptedStyleSheets;
};
</pre>

Expand All @@ -146,11 +142,6 @@ partial interface StyleSheetList {
Style sheets assigned to this attribute are part of the <a spec=cssom-1>document CSS style sheets</a>.
They are ordered after the stylesheets in {{Document/styleSheets}}.
</dd>

<dt><dfn constructor for=StyleSheetList lt="StyleSheetList(sheets))">StyleSheetList(sheets)</dfn></dt>
<dd>
Creates a {{StyleSheetList}} containing the contents of sheets.
</dd>
</dl>

Applying Styles In All Contexts {#styles-in-all-contexts}
Expand Down