Document Document.activeElement and ShadowRoot.activeElement separate…

…ly. (#2395) * yarn content move Web/API/DocumentOrShadowRoot/activeElement Web/API/Document/activeElement * Update document.activeElement * Update document interface page * Update link to activeElement from css page * Update ShadowRoot interface page * Add new page for ShadowRoot.activeElement * fix case of dir * copy edit * copy edit Co-authored-by: Chris Mills <cmills@mozilla.com>
mdn · Feb 16, 2021 · 55812d1 · 55812d1
1 parent 8f6de46
commit 55812d1
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 46 deletions.
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
@@ -1878,7 +1878,7 @@
 /en-US/docs/DOM/dispatchEvent_example	/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
 /en-US/docs/DOM/document	/en-US/docs/Web/API/Document
 /en-US/docs/DOM/document.URL	/en-US/docs/Web/API/Document/URL
-/en-US/docs/DOM/document.activeElement	/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
+/en-US/docs/DOM/document.activeElement	/en-US/docs/Web/API/Document/activeElement
 /en-US/docs/DOM/document.addEventListener	/en-US/docs/Web/API/EventTarget/addEventListener
 /en-US/docs/DOM/document.alinkColor	/en-US/docs/Web/API/Document/alinkColor
 /en-US/docs/DOM/document.anchors	/en-US/docs/Web/API/Document/anchors
@@ -2419,7 +2419,7 @@
 /en-US/docs/DOM:dispatchEvent_example	/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
 /en-US/docs/DOM:document	/en-US/docs/Web/API/Document
 /en-US/docs/DOM:document.URL	/en-US/docs/Web/API/Document/URL
-/en-US/docs/DOM:document.activeElement	/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
+/en-US/docs/DOM:document.activeElement	/en-US/docs/Web/API/Document/activeElement
 /en-US/docs/DOM:document.alinkColor	/en-US/docs/Web/API/Document/alinkColor
 /en-US/docs/DOM:document.anchors	/en-US/docs/Web/API/Document/anchors
 /en-US/docs/DOM:document.applets	/en-US/docs/Web/API/Document/applets
@@ -3250,7 +3250,7 @@
 /en-US/docs/Document_Object_Model_(DOM)/cssMediaRule	/en-US/docs/Web/API/CSSMediaRule
 /en-US/docs/Document_Object_Model_(DOM)/dispatchEvent_example	/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
 /en-US/docs/Document_Object_Model_(DOM)/document.URL	/en-US/docs/Web/API/Document/URL
-/en-US/docs/Document_Object_Model_(DOM)/document.activeElement	/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
+/en-US/docs/Document_Object_Model_(DOM)/document.activeElement	/en-US/docs/Web/API/Document/activeElement
 /en-US/docs/Document_Object_Model_(DOM)/document.alinkColor	/en-US/docs/Web/API/Document/alinkColor
 /en-US/docs/Document_Object_Model_(DOM)/document.anchors	/en-US/docs/Web/API/Document/anchors
 /en-US/docs/Document_Object_Model_(DOM)/document.applets	/en-US/docs/Web/API/Document/applets
@@ -7509,7 +7509,6 @@
 /en-US/docs/Web/API/Document/Document:_DOMContentLoaded_event	/en-US/docs/Web/API/Document/DOMContentLoaded_event
 /en-US/docs/Web/API/Document/Document:_paste_event	/en-US/docs/Web/API/Document/paste_event
 /en-US/docs/Web/API/Document/ParentNode.querySelectorAll	/en-US/docs/Web/API/ParentNode/querySelectorAll
-/en-US/docs/Web/API/Document/activeElement	/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
 /en-US/docs/Web/API/Document/async	/en-US/docs/Web/API/XMLDocument/async
 /en-US/docs/Web/API/Document/baseURI	/en-US/docs/Web/API/Node/baseURI
 /en-US/docs/Web/API/Document/cancelFullscreen	/en-US/docs/Web/API/Document/exitFullscreen
@@ -7567,6 +7566,7 @@
 /en-US/docs/Web/API/DocumentFragment/children	/en-US/docs/Web/API/ParentNode/children
 /en-US/docs/Web/API/DocumentFragment/firstElementChild	/en-US/docs/Web/API/ParentNode/firstElementChild
 /en-US/docs/Web/API/DocumentFragment/lastElementChild	/en-US/docs/Web/API/ParentNode/lastElementChild
+/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement	/en-US/docs/Web/API/Document/activeElement
 /en-US/docs/Web/API/DocumentOrShadowRoot/nodeFromPoint	/en-US/docs/Web/API/DocumentOrShadowRoot
 /en-US/docs/Web/API/DocumentOrShadowRoot/nodesFromPoint	/en-US/docs/Web/API/DocumentOrShadowRoot
 /en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureEnabled	/en-US/docs/Web/API/DocumentOrShadowRoot/pictureInPictureElement
@@ -9249,7 +9249,7 @@
 /en-US/docs/Web/API/console.trace	/en-US/docs/Web/API/Console/trace
 /en-US/docs/Web/API/console.warn	/en-US/docs/Web/API/Console/warn
 /en-US/docs/Web/API/document.URL	/en-US/docs/Web/API/Document/URL
-/en-US/docs/Web/API/document.activeElement	/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
+/en-US/docs/Web/API/document.activeElement	/en-US/docs/Web/API/Document/activeElement
 /en-US/docs/Web/API/document.adoptNode	/en-US/docs/Web/API/Document/adoptNode
 /en-US/docs/Web/API/document.alinkColor	/en-US/docs/Web/API/Document/alinkColor
 /en-US/docs/Web/API/document.anchors	/en-US/docs/Web/API/Document/anchors

diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
@@ -44326,25 +44326,6 @@
       "david_ross"
     ]
   },
-  "Web/API/DocumentOrShadowRoot/activeElement": {
-    "modified": "2020-10-15T21:49:26.859Z",
-    "contributors": [
-      "alattalatta",
-      "mfluehr",
-      "sideshowbarker",
-      "krosylight",
-      "Konrud",
-      "chrisdavidmills",
-      "spencer523",
-      "Sheppy",
-      "Volker-E",
-      "jpmedley",
-      "u_7cc",
-      "fscholz",
-      "bede",
-      "david_ross"
-    ]
-  },
   "Web/API/DocumentOrShadowRoot/caretPositionFromPoint": {
     "modified": "2020-10-15T21:49:27.908Z",
     "contributors": [
@@ -165885,5 +165866,24 @@
     "contributors": [
       "sideshowbarker"
     ]
+  },
+  "Web/API/Document/activeElement": {
+    "modified": "2020-10-15T21:49:26.859Z",
+    "contributors": [
+      "alattalatta",
+      "mfluehr",
+      "sideshowbarker",
+      "krosylight",
+      "Konrud",
+      "chrisdavidmills",
+      "spencer523",
+      "Sheppy",
+      "Volker-E",
+      "jpmedley",
+      "u_7cc",
+      "fscholz",
+      "bede",
+      "david_ross"
+    ]
   }
-}
+}
diff --git a/...mentorshadowroot/activeelement/index.html → ...web/api/document/activeelement/index.html b/...mentorshadowroot/activeelement/index.html → ...web/api/document/activeelement/index.html
@@ -1,22 +1,19 @@
 ---
-title: DocumentOrShadowRoot.activeElement
-slug: Web/API/DocumentOrShadowRoot/activeElement
+title: Document.activeElement
+slug: Web/API/Document/activeElement
 tags:
-- API
-- Document
-- DocumentOrShadowRoot
-- Focus
-- Property
-- Reference
-- ShadowRoot
-- activeElement
+  - API
+  - Document
+  - Focus
+  - Property
+  - Reference
+  - ShadowRoot
+  - activeElement
 ---
 <div>{{APIRef("Shadow DOM")}}</div>
 
-<p><span class="seoSummary">The <strong><code>activeElement</code></strong> read-only
-    property of the {{domxref("Document")}} and {{domxref("ShadowRoot")}} interfaces
-    returns the {{domxref("Element")}} within the DOM or shadow DOM tree that currently
-    has focus.</span></p>
+<p><span class="seoSummary">The <strong><code>activeElement</code></strong> read-only property
+of the {{domxref("Document")}} interface returns the {{domxref("Element")}} within the DOM that currently has focus.</span></p>
 
 <p>Often <code>activeElement</code> will return a {{domxref("HTMLInputElement")}} or
   {{domxref("HTMLTextAreaElement")}} object if it has the text selection at the time. If
@@ -41,7 +38,7 @@
 <h2 id="Syntax">Syntax</h2>
 
 <pre
-  class="brush: js notranslate"><em>element</em> = <em>DocumentOrShadowRoot</em>.activeElement</pre>
+  class="brush: js notranslate"><em>element</em> = <em>document</em>.activeElement</pre>
 
 <h3 id="Value">Value</h3>
 
@@ -105,4 +102,4 @@ <h2 id="Specifications">Specifications</h2>
 
 <h2 id="Browser_compatibility">Browser compatibility</h2>
 
-<p>{{Compat("api.DocumentOrShadowRoot.activeElement")}}</p>
+<p>{{Compat("api.Document.activeElement")}}</p>
diff --git a/files/en-us/web/api/document/index.html b/files/en-us/web/api/document/index.html
@@ -28,6 +28,8 @@ <h2 id="Properties">Properties</h2>
 <p><em>This interface also inherits from the {{DOMxRef("Node")}} and {{DOMxRef("EventTarget")}} interfaces.</em></p>
 
 <dl>
+ <dt>{{DOMxRef("Document.activeElement")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef('Element')}} that currently has focus.</dd>
  <dt>{{DOMxRef("Document.body")}}</dt>
  <dd>Returns the {{HTMLElement("body")}} or {{htmlelement("frameset")}} node of the current document.</dd>
  <dt>{{DOMxRef("Document.characterSet")}}{{ReadOnlyInline}}</dt>
@@ -116,8 +118,6 @@ <h3 id="Properties_included_from_DocumentOrShadowRoot">Properties included from
 <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.activeElement")}}{{ReadOnlyInline}}</dt>
- <dd>Returns the {{DOMxRef('Element')}} within the shadow tree that has focus.</dd>
  <dt>{{DOMxRef("Document.fullscreenElement")}}{{ReadOnlyInline}}</dt>
  <dd>The element that's currently in full screen mode for this document.</dd>
  <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>

diff --git a/files/en-us/web/api/shadowroot/activeelement/index.html b/files/en-us/web/api/shadowroot/activeelement/index.html
@@ -0,0 +1,54 @@
+---
+title: ShadowRoot.activeElement
+slug: Web/API/ShadowRoot/activeElement
+tags:
+- API
+- Property
+- Reference
+- ShadowRoot
+- Web Components
+- shadow dom
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>The <strong><code>activeElement</code></strong> read-only property of the
+{{domxref("ShadowRoot")}} interface returns the element within the shadow tree that has focus.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js"><var>shadowRoot</var>.activeElement</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>The {{domxref('Element')}} which currently has focus, or <code>null</code> if there is no focused element.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js notranslate">let customElem = document.querySelector('my-shadow-dom-element');
+let shadow = customElem.shadowRoot;
+let focusedElem = shadow.activeElement;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('HTML WHATWG','#dom-documentorshadowroot-activeelement', 'activeElement')}}</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.ShadowRoot.activeElement")}}</p>
+
+<h2>See also</h2>
+
+<ul>
+  <li>{{domxref("Document.activeElement")}}</li>
+</ul>
diff --git a/files/en-us/web/api/shadowroot/index.html b/files/en-us/web/api/shadowroot/index.html
@@ -18,6 +18,8 @@
 <h2 id="Properties">Properties</h2>
 
 <dl>
+ <dt>{{domxref("ShadowRoot.activeElement")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref('Element')}} within the shadow tree that has focus.</dd>
  <dt>{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}</dt>
  <dd>Returns a boolean that indicates whether delegatesFocus was set when the shadow was attached (see {{domxref("Element.attachShadow()")}}).</dd>
  <dt>{{domxref("ShadowRoot.host")}} {{readonlyinline}}</dt>
@@ -33,8 +35,6 @@ <h3 id="Properties_included_from_DocumentOrShadowRoot">Properties included from
 <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.activeElement")}} {{readonlyInline}}</dt>
- <dd>Returns the {{domxref('Element')}} within the shadow tree that has focus.</dd>
  <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>

diff --git a/files/en-us/web/css/_colon_-moz-window-inactive/index.html b/files/en-us/web/css/_colon_-moz-window-inactive/index.html
@@ -66,5 +66,5 @@ <h2 id="See_also">See also</h2>
    <li><code><a href="/en-US/docs/Web/CSS/:active">:active</a></code></li>
   </ul>
  </li>
- <li>The {{domxref("DocumentOrShadowRoot.activeElement", "activeElement")}} property on <a href="/en-US/docs/Web/API/Document">documents</a> and <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> roots</li>
+ <li>The {{domxref("Document.activeElement")}} property for regular DOM, and the {{domxref("ShadowRoot.activeElement")}} property for <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> roots.</li>
 </ul>