Add proper Document.stylesheets/ShadowRoot.styleSheets; no mixin (#2972)

mdn · Mar 9, 2021 · a0cec40 · a0cec40
1 parent 701f5bc
commit a0cec40
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 66 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -1962,7 +1962,7 @@
 /en-US/docs/DOM/document.releaseCapture	/en-US/docs/Web/API/Document/releaseCapture
 /en-US/docs/DOM/document.selectedStyleSheetSet	/en-US/docs/Web/API/Document/selectedStyleSheetSet
 /en-US/docs/DOM/document.styleSheetSets	/en-US/docs/Web/API/Document/styleSheetSets
-/en-US/docs/DOM/document.styleSheets	/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets
+/en-US/docs/DOM/document.styleSheets	/en-US/docs/Web/API/Document/styleSheets
 /en-US/docs/DOM/document.textContent	/en-US/docs/Web/API/Node/textContent
 /en-US/docs/DOM/document.title	/en-US/docs/Web/API/Document/title
 /en-US/docs/DOM/document.tooltipNode	/en-US/docs/Web/API/Document/tooltipNode
@@ -2479,7 +2479,7 @@
 /en-US/docs/DOM:document.plugins	/en-US/docs/Web/API/Document/plugins
 /en-US/docs/DOM:document.popupNode	/en-US/docs/Web/API/Document/popupNode
 /en-US/docs/DOM:document.referrer	/en-US/docs/Web/API/Document/referrer
-/en-US/docs/DOM:document.styleSheets	/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets
+/en-US/docs/DOM:document.styleSheets	/en-US/docs/Web/API/Document/styleSheets
 /en-US/docs/DOM:document.textContent	/en-US/docs/Web/API/Node/textContent
 /en-US/docs/DOM:document.title	/en-US/docs/Web/API/Document/title
 /en-US/docs/DOM:document.tooltipNode	/en-US/docs/Web/API/Document/tooltipNode
@@ -3329,7 +3329,7 @@
 /en-US/docs/Document_Object_Model_(DOM)/document.releaseCapture	/en-US/docs/Web/API/Document/releaseCapture
 /en-US/docs/Document_Object_Model_(DOM)/document.selectedStyleSheetSet	/en-US/docs/Web/API/Document/selectedStyleSheetSet
 /en-US/docs/Document_Object_Model_(DOM)/document.styleSheetSets	/en-US/docs/Web/API/Document/styleSheetSets
-/en-US/docs/Document_Object_Model_(DOM)/document.styleSheets	/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets
+/en-US/docs/Document_Object_Model_(DOM)/document.styleSheets	/en-US/docs/Web/API/Document/styleSheets
 /en-US/docs/Document_Object_Model_(DOM)/document.textContent	/en-US/docs/Web/API/Node/textContent
 /en-US/docs/Document_Object_Model_(DOM)/document.title	/en-US/docs/Web/API/Document/title
 /en-US/docs/Document_Object_Model_(DOM)/document.tooltipNode	/en-US/docs/Web/API/Document/tooltipNode
@@ -7549,7 +7549,6 @@
 /en-US/docs/Web/API/Document/onselectionchange	/en-US/docs/Web/API/GlobalEventHandlers/onselectionchange
 /en-US/docs/Web/API/Document/onsubmit	/en-US/docs/Web/API/GlobalEventHandlers/onsubmit
 /en-US/docs/Web/API/Document/resourcetimingbufferfull_event	/en-US/docs/Web/API/Performance/resourcetimingbufferfull_event
-/en-US/docs/Web/API/Document/styleSheets	/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets
 /en-US/docs/Web/API/Document/timeline/currentTime	/en-US/docs/Web/API/AnimationTimeline/currentTime
 /en-US/docs/Web/API/DocumentFragment.DocumentFragment	/en-US/docs/Web/API/DocumentFragment/DocumentFragment
 /en-US/docs/Web/API/DocumentFragment.querySelector	/en-US/docs/Web/API/DocumentFragment/querySelector
@@ -7565,6 +7564,7 @@
 /en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureElement	/en-US/docs/Web/API/Document/pictureInPictureElement
 /en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureEnabled	/en-US/docs/Web/API/Document/pictureInPictureEnabled
 /en-US/docs/Web/API/DocumentOrShadowRoot/pointerLockElement	/en-US/docs/Web/API/Document/pointerLockElement
+/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets	/en-US/docs/Web/API/Document/styleSheets
 /en-US/docs/Web/API/DocumentTouch.createTouch	/en-US/docs/Web/API/Document/createTouch
 /en-US/docs/Web/API/DocumentTouch.createTouchList	/en-US/docs/Web/API/Document/createTouchList
 /en-US/docs/Web/API/DocumentTouch/createTouch	/en-US/docs/Web/API/Document/createTouch
@@ -9345,7 +9345,7 @@
 /en-US/docs/Web/API/document.releaseCapture	/en-US/docs/Web/API/Document/releaseCapture
 /en-US/docs/Web/API/document.selectedStyleSheetSet	/en-US/docs/Web/API/Document/selectedStyleSheetSet
 /en-US/docs/Web/API/document.styleSheetSets	/en-US/docs/Web/API/Document/styleSheetSets
-/en-US/docs/Web/API/document.styleSheets	/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets
+/en-US/docs/Web/API/document.styleSheets	/en-US/docs/Web/API/Document/styleSheets
 /en-US/docs/Web/API/document.textContent	/en-US/docs/Web/API/Node/textContent
 /en-US/docs/Web/API/document.title	/en-US/docs/Web/API/Document/title
 /en-US/docs/Web/API/document.tooltipNode	/en-US/docs/Web/API/Document/tooltipNode
@@ -11982,7 +11982,7 @@
 /en-US/docs/document.open	/en-US/docs/Web/API/Document/open
 /en-US/docs/document.plugins	/en-US/docs/Web/API/Document/plugins
 /en-US/docs/document.referrer	/en-US/docs/Web/API/Document/referrer
-/en-US/docs/document.styleSheets	/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets
+/en-US/docs/document.styleSheets	/en-US/docs/Web/API/Document/styleSheets
 /en-US/docs/document.title	/en-US/docs/Web/API/Document/title
 /en-US/docs/document.vlinkColor	/en-US/docs/Web/API/Document/vlinkColor
 /en-US/docs/document.width	/en-US/docs/Web/API/Document/width

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -44368,19 +44368,6 @@
       "mattwojo"
     ]
   },
-  "Web/API/DocumentOrShadowRoot/styleSheets": {
-    "modified": "2020-10-19T21:57:52.891Z",
-    "contributors": [
-      "alattalatta",
-      "mfluehr",
-      "mfuji09",
-      "wbamberg",
-      "fscholz",
-      "chrisdavidmills",
-      "david_ross",
-      "jpmedley"
-    ]
-  },
   "Web/API/DocumentTimeline": {
     "modified": "2020-10-15T21:45:09.763Z",
     "contributors": [
@@ -165806,5 +165793,18 @@
       "kscarfone",
       "Jeremie"
     ]
+  },
+  "Web/API/Document/styleSheets": {
+    "modified": "2020-10-19T21:57:52.891Z",
+    "contributors": [
+      "alattalatta",
+      "mfluehr",
+      "mfuji09",
+      "wbamberg",
+      "fscholz",
+      "chrisdavidmills",
+      "david_ross",
+      "jpmedley"
+    ]
   }
-}
+}
diff --git a/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -175,7 +175,7 @@ <h3 id="Manipulating_styles">Manipulating styles</h3>
 
 <p>It is possible to manipulate CSS styles via JavaScript in a variety of ways.</p>
 
-<p>To start with, you can get a list of all the stylesheets attached to a document using {{domxref("DocumentOrShadowRoot/styleSheets", "Document.stylesheets")}}, which returns an array-like object with {{domxref("CSSStyleSheet")}} objects. You can then add/remove styles as wished. However, we're not going to expand on those features because they are a somewhat archaic and difficult way to manipulate style. There are much easier ways.</p>
+<p>To start with, you can get a list of all the stylesheets attached to a document using {{domxref("Document.stylesheets")}}, which returns an array-like object with {{domxref("CSSStyleSheet")}} objects. You can then add/remove styles as wished. However, we're not going to expand on those features because they are a somewhat archaic and difficult way to manipulate style. There are much easier ways.</p>
 
 <p>The first way is to add inline styles directly onto elements you want to dynamically style. This is done with the {{domxref("ElementCSSInlineStyle/style", "HTMLElement.style")}} property, which contains inline styling information for each element in the document. You can set properties of this object to directly update element styles.</p>
 

diff --git a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.html
@@ -16,7 +16,7 @@
 
 <p>The basic <code>style</code> object exposes the {{domxref("Stylesheet")}} and the {{domxref("CSSStylesheet")}} interfaces. Those interfaces contain members like <code>insertRule</code>, <code>selectorText</code>, and <code>parentStyleSheet</code> for accessing and manipulating the individual style rules that make up a CSS stylesheet.</p>
 
-<p>To get to the <code>style</code> objects from the <code>document</code>, you can use the {{domxref("DocumentOrShadowRoot.styleSheets")}} property and access the individual objects by index (e.g., <code>document.styleSheets[0]</code> is the first stylesheet defined for the document, etc.).</p>
+<p>To get to the <code>style</code> objects from the <code>document</code>, you can use the {{domxref("Document.styleSheets")}} property and access the individual objects by index (e.g., <code>document.styleSheets[0]</code> is the first stylesheet defined for the document, etc.).</p>
 
 <h2 id="Modify_a_stylesheet_rule">Modify a stylesheet rule with CSSOM</h2>
 

diff --git a/files/en-us/web/api/cssstylesheet/index.html b/files/en-us/web/api/cssstylesheet/index.html
@@ -88,9 +88,9 @@ <h2 id="Notes">Notes</h2>
 
 <p>In some browsers, if a stylesheet is loaded from a different domain, accessing <code>cssRules</code> results in <code>SecurityError</code>.</p>
 
-<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("DocumentOrShadowRoot/styleSheets", "document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p>
+<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("Document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p>
 
-<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's {{domxref("DocumentOrShadowRoot/styleSheets", "document.styleSheets")}} list automatically by the browser, when a stylesheet is loaded for a document. As the stylesheet list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a> is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p>
+<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's {{domxref("Document.styleSheets")}} list automatically by the browser, when a stylesheet is loaded for a document. As the stylesheet list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a> is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p>
 
 <p>A (possibly incomplete) list of ways a stylesheet can be associated with a document follows:</p>
 

diff --git a/files/en-us/web/api/document/index.html b/files/en-us/web/api/document/index.html
@@ -78,6 +78,8 @@ <h2 id="Properties">Properties</h2>
  <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd>
  <dt>{{DOMxRef("Document.scrollingElement")}}{{ReadOnlyInline}}</dt>
  <dd>Returns a reference to the {{DOMxRef("Element")}} that scrolls the document.</dd>
+ <dt>{{DOMxRef("Document.styleSheets")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef('StyleSheetList')}} of {{DOMxRef('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd>
  <dt>{{DOMxRef("Document.timeline")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
  <dd>Returns timeline as a special instance of {{domxref("DocumentTimeline")}} that is automatically created on page load.</dd>
  <dt>{{DOMxRef("Document.undoManager")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
@@ -119,15 +121,6 @@ <h3 id="Extensions_for_HTMLDocument">Extensions for HTMLDocument</h3>
  <dd>Returns the document location as a string.</dd>
 </dl>
 
-<h3 id="Properties_included_from_DocumentOrShadowRoot">Properties included from DocumentOrShadowRoot</h3>
-
-<p><em>The <code>Document</code> interface includes the following properties defined on the {{DOMxRef("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them directly on the {{DOMxRef("Document")}} interface.</em></p>
-
-<dl>
- <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt>
- <dd>Returns a {{DOMxRef('StyleSheetList')}} of {{DOMxRef('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd>
-</dl>
-
 <h3 id="Event_handlers">Event handlers</h3>
 
 <dl>

diff --git a/...cumentorshadowroot/stylesheets/index.html → ...s/web/api/document/stylesheets/index.html b/...cumentorshadowroot/stylesheets/index.html → ...s/web/api/document/stylesheets/index.html
@@ -1,19 +1,29 @@
 ---
-title: DocumentOrShadowRoot.styleSheets
-slug: Web/API/DocumentOrShadowRoot/styleSheets
+title: Document.styleSheets
+slug: Web/API/Document/styleSheets
 tags:
   - API
   - Document
-  - DocumentOrShadowRoot
   - Property
   - Reference
-  - ShadowRoot
   - Stylesheets
-  - shadow dom
 ---
-<div>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</div>
+<div>{{APIRef("CSSOM")}}</div>
 
-<p><span class="seoSummary">The <strong><code>styleSheets</code></strong> read-only property of the {{domxref("DocumentOrShadowRoot")}} interface returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects, for stylesheets explicitly linked into or embedded in a document.</span></p>
+<p><span class="seoSummary">The <strong><code>styleSheets</code></strong> read-only property of the {{domxref("Document")}} interface returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects, for stylesheets explicitly linked into or embedded in a document.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">document.styleSheets</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>The returned list is ordered as follows:</p>
+
+<ul>
+ <li>StyleSheets retrieved from {{htmlelement("link")}} headers are placed first, sorted in header order.</li>
+ <li>StyleSheets retrieved from the DOM are placed after, sorted in <a href="https://dom.spec.whatwg.org/#concept-tree-order">tree order</a>.</li>
+</ul>
 
 <h2 id="Examples">Examples</h2>
 
@@ -27,32 +37,19 @@ <h2 id="Examples">Examples</h2>
 }
 </pre>
 
-<h3 id="Notes">Notes</h3>
-
-<p>The returned list is ordered as follows:</p>
-
-<ul>
- <li>StyleSheets retrieved from {{htmlelement("link")}} headers are placed first, sorted in header order.</li>
- <li>StyleSheets retrieved from the DOM are placed after, sorted in <a href="https://dom.spec.whatwg.org/#concept-tree-order">tree order</a>.</li>
-</ul>
-
 <h2 id="Specifications">Specifications</h2>
 
 <table class="standard-table">
  <tbody>
   <tr>
    <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
   </tr>
   <tr>
-   <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
-   <td>{{Spec2('Shadow DOM')}}</td>
-   <td>Initial definition.</td>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-or-shadow-root-interface','DocumentOrShadowRoot.styleSheets')}}</td>
   </tr>
  </tbody>
 </table>
 
 <h2 id="Browser_compatibility">Browser compatibility</h2>
 
-<p>{{Compat("api.DocumentOrShadowRoot.styleSheets")}}</p>
+<p>{{Compat("api.Document.styleSheets")}}</p>
diff --git a/files/en-us/web/api/shadowroot/index.html b/files/en-us/web/api/shadowroot/index.html
@@ -34,15 +34,8 @@ <h2 id="Properties">Properties</h2>
  <dd>Returns the {{DOMxRef('Element')}} within the shadow tree that is currently being presented in picture-in-picture mode.</dd>
  <dt>{{DOMxRef("ShadowRoot.pointerLockElement")}} {{ReadOnlyInline}}</dt>
  <dd>Returns the {{DOMxRef('Element')}} set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another tree.</dd>
-</dl>
-
-<h3 id="Properties_included_from_DocumentOrShadowRoot">Properties included from DocumentOrShadowRoot</h3>
-
-<p><em>The <code>ShadowRoot</code> interface includes the following properties defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{domxref("Document")}} interface.</em></p>
-
-<dl>
- <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
- <dd>Returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd>
+ <dt>{{domxref("ShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a shadow tree.</dd>
 </dl>
 
 <h2 id="Methods">Methods</h2>

diff --git a/files/en-us/web/api/shadowroot/stylesheets/index.html b/files/en-us/web/api/shadowroot/stylesheets/index.html
@@ -0,0 +1,47 @@
+---
+title: ShadowRoot.styleSheets
+slug: Web/API/ShadowRoot/styleSheets
+tags:
+  - API
+  - ShadowRoot
+  - Property
+  - Reference
+  - Stylesheets
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>The <strong><code>styleSheets</code></strong> read-only property of the {{domxref("ShadowRoot")}} interface
+returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects, for stylesheets explicitly linked into or embedded in a shadow tree.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">shadowRoot.styleSheets</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">
+let customElem = document.querySelector('my-shadow-dom-element');
+let shadow = customElem.shadowRoot;
+let styleSheets = shadow.styleSheets;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-or-shadow-root-interface','DocumentOrShadowRoot.styleSheets')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.ShadowRoot.styleSheets")}}</p>
diff --git a/files/en-us/web/css/reference/index.html b/files/en-us/web/css/reference/index.html
@@ -159,7 +159,7 @@ <h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
 <h3 id="Major_object_types">Major object types</h3>
 
 <ul>
- <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
+ <li>{{DOMxRef("Document.styleSheets")}}</li>
  <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
  <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector &amp; style)</span></li>
  <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>

diff --git a/files/en-us/web/html/element/link/index.html b/files/en-us/web/html/element/link/index.html
@@ -144,7 +144,7 @@ <h2 id="Attributes">Attributes</h2>
  <dd>
  <p>For <code>rel="stylesheet"</code> only, the <code>disabled</code> Boolean attribute indicates whether or not the described stylesheet should be loaded and applied to the document. If <code>disabled</code> is specified in the HTML when it is loaded, the stylesheet will not be loaded during page load. Instead, the stylesheet will be loaded on-demand, if and when the <code>disabled</code> attribute is changed to <code>false</code> or removed.</p>
 
- <p>Setting the <code>disabled</code> property in the DOM causes the stylesheet to be removed from the document's {{domxref("DocumentOrShadowRoot/styleSheets")}} list.</p>
+ <p>Setting the <code>disabled</code> property in the DOM causes the stylesheet to be removed from the document's {{domxref("Document.styleSheets")}} list.</p>
  </dd>
  <dt>{{HTMLAttrDef("href")}}</dt>
  <dd>This attribute specifies the {{glossary("URL")}} of the linked resource. A URL can be absolute or relative.</dd>