ported from UXP: Issue #2135 - Bug 1453789: Remove Element.createShadowRoot (45c179d0)

2026-05-26 15:02:46 +00:00 · 2023-03-07 09:58:27 +08:00
parent df33d59d4e
commit 0d44f7d042
18 changed files with 25 additions and 282 deletions
@@ -25,10 +25,8 @@
  <script>
  "use strict";
  var host = document.querySelector("#shadow");
-  if (host.createShadowRoot) {
-    var root = host.createShadowRoot();
-    root.innerHTML = "<h3>Shadow DOM</h3><select multiple></select>";
-  }
+  var root = host.attachShadow({ mode: "open" });
+  root.innerHTML = "<h3>Shadow DOM</h3><select multiple></select>";
  </script>
 </body>
 </html>
@@ -22,8 +22,8 @@

      // Set up a basic shadow DOM
      var host = document.querySelector('#shadow');
-      if (host.createShadowRoot) {
-        var root = host.createShadowRoot();
+      if (host.attachShadow) {
+        let root = host.attachShadow({ mode: "open" });
        root.innerHTML = '<h3>Shadow <em>DOM</em></h3><select multiple></select>';
      }

@@ -1120,18 +1120,6 @@ Element::AttachShadow(const ShadowRootInit& aInit, ErrorResult& aError)
    return nullptr;
  }

-  return AttachShadowInternal(aInit.mMode == ShadowRootMode::Closed, aError);
-}
-
-already_AddRefed<ShadowRoot>
-Element::CreateShadowRoot(ErrorResult& aError)
-{
-  return AttachShadowInternal(false, aError);
-}
-
-already_AddRefed<ShadowRoot>
-Element::AttachShadowInternal(bool aClosed, ErrorResult& aError)
-{
  /**
   * 3. If context object is a shadow host, then throw
   *    an "InvalidStateError" DOMException.
@@ -1177,8 +1165,9 @@ Element::AttachShadowInternal(bool aClosed, ErrorResult& aError)
   *    context object???s node document, host is context object,
   *    and mode is init???s mode.
   */
+  bool isClosed = (aInit.mMode == ShadowRootMode::Closed);
  RefPtr<ShadowRoot> shadowRoot =
-    new ShadowRoot(this, aClosed, nodeInfo.forget(), protoBinding);
+    new ShadowRoot(this, isClosed, nodeInfo.forget(), protoBinding);

  shadowRoot->SetIsComposedDocParticipant(IsInComposedDoc());

@@ -527,9 +527,6 @@ protected:
    mState &= ~aStates;
  }

-  already_AddRefed<ShadowRoot> AttachShadowInternal(bool aClosed,
-                                                    ErrorResult& aError);
-
 private:
  // Need to allow the ESM, nsGlobalWindow, and the focus manager to
  // set our state
@@ -995,9 +992,6 @@ public:
  void SetSlot(const nsAString& aName, ErrorResult& aError);
  void GetSlot(nsAString& aName);

-  // [deprecated] Shadow DOM v0
-  already_AddRefed<ShadowRoot> CreateShadowRoot(ErrorResult& aError);
-
  ShadowRoot *FastGetShadowRoot() const
  {
    nsExtendedDOMSlots* slots = GetExistingExtendedDOMSlots();
@@ -5,8 +5,7 @@
 <body>
 <div id="host"></div>
 <script>
-var s = host.createShadowRoot();
-s.innerHTML = '<input type="range" />';
+host.attachShadow({ mode: "open" }).innerHTML = '<input type="range" />';
 </script>
 </body>
 </html>
@@ -3,7 +3,7 @@
 <body>
 <script>
  var x = document.createElement('span');
-  x.createShadowRoot();
+  x.attachShadow({ mode: "open" });
  x.id = 'a';
 </script>
 </body>
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-<style>
-#foo {
-  overflow: scroll;
-  height: 100px;
-}
-</style>
-<div id="foo">
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-Mozilla Firefox<br>
-<script>
-foo.createShadowRoot().innerHTML = "<content></content>";
-</script>
-</body>
-</html>
@@ -1,173 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=887538
-->
-<head>
-  <title>Test for HTMLShadowElement</title>
-  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
-</head>
-<body>
-<div id="grabme"></div>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=887538">Bug 887538</a>
-<script>
-var host = document.createElement("span");
-
-// Create three shadow roots on a single host and make sure that shadow elements
-// are associated with the correct shadow root.
-var firstShadow = host.createShadowRoot();
-firstShadow.innerHTML = '<shadow id="shadowone"></shadow>';
-var secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<shadow id="shadowtwo"></shadow>';
-var thirdShadow = host.createShadowRoot();
-thirdShadow.innerHTML = '<shadow id="shadowthree"></shadow>';
-
-is(firstShadow.getElementById("shadowone").olderShadowRoot, null, "Shadow element in oldest ShadowRoot should not be associated with a ShadowRoot.");
-is(secondShadow.getElementById("shadowtwo").olderShadowRoot, firstShadow, "Shadow element should be associated with older ShadowRoot.");
-is(thirdShadow.getElementById("shadowthree").olderShadowRoot, secondShadow, "Shadow element should be associated with older ShadowRoot.");
-
-// Only the first ShadowRoot in tree order is an insertion point.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<shadow id="shadowone"></shadow><shadow id="shadowtwo"></shadow>';
-var shadowElemOne = secondShadow.getElementById("shadowone");
-var shadowElemTwo = secondShadow.getElementById("shadowtwo");
-
-is(shadowElemOne.olderShadowRoot, firstShadow, "First <shadow> in tree order should be an insertion point.");
-is(shadowElemTwo.olderShadowRoot, null, "Second <shadow> in tree order should not be an insertion point.");
-
-// Remove the first <shadow> element and make sure the second <shadow> element becomes an insertion point.
-secondShadow.removeChild(shadowElemOne);
-is(shadowElemOne.olderShadowRoot, null, "<shadow> element not in a ShadowRoot is not an insertion point.");
-is(shadowElemTwo.olderShadowRoot, firstShadow, "Second <shadow> element should become insertion point after first is removed.");
-
-// Insert a <shadow> element before the current shadow insertion point and make sure that it becomes an insertion point.
-secondShadow.insertBefore(shadowElemOne, shadowElemTwo);
-is(shadowElemOne.olderShadowRoot, firstShadow, "<shadow> element inserted as first in tree order should become an insertion point.");
-is(shadowElemTwo.olderShadowRoot, null, "<shadow> element should no longer be an insertion point it another is inserted before.");
-
-// <shadow> element in fallback content is not an insertion point.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<content><shadow id="shadowone"></shadow></content><shadow id="shadowtwo"></shadow>';
-shadowElemOne = secondShadow.getElementById("shadowone");
-shadowElemTwo = secondShadow.getElementById("shadowtwo");
-
-is(shadowElemOne.olderShadowRoot, null, "<shadow> element in fallback content is not an insertion point.");
-is(shadowElemTwo.olderShadowRoot, null, "<shadow> element preceeded by another <shadow> element is not an insertion point.");
-
-// <shadow> element that is descendant of shadow element is not an insertion point.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<shadow><shadow id="shadowone"></shadow></shadow>';
-shadowElemOne = secondShadow.getElementById("shadowone");
-is(shadowElemOne.olderShadowRoot, null, "<shadow> element that is descendant of shadow element is not an insertion point.");
-
-// Check projection of <content> elements through <shadow> elements.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-firstShadow.innerHTML = '<content id="firstcontent"></content>';
-secondShadow.innerHTML = '<shadow><span id="one"></span><content id="secondcontent"></content><span id="four"></span></shadow>';
-host.innerHTML = '<span id="two"></span><span id="three"></span>';
-var firstContent = firstShadow.getElementById("firstcontent");
-var secondContent = secondShadow.getElementById("secondcontent");
-var firstDistNodes = firstContent.getDistributedNodes();
-var secondDistNodes = secondContent.getDistributedNodes();
-
-is(secondDistNodes.length, 2, "There should be two distributed nodes from the host.");
-ok(secondDistNodes[0].id == "two" &&
-   secondDistNodes[1].id == "three", "Nodes projected from host should preserve order.");
-
-is(firstDistNodes.length, 4, "There should be four distributed nodes, two from the first shadow, two from the second shadow.");
-ok(firstDistNodes[0].id == "one" &&
-   firstDistNodes[1].id == "two" &&
-   firstDistNodes[2].id == "three" &&
-   firstDistNodes[3].id == "four", "Reprojection through shadow should preserve node order.");
-
-// Remove a node from the host and make sure that it is removed from all insertion points.
-host.removeChild(host.firstChild);
-firstDistNodes = firstContent.getDistributedNodes();
-secondDistNodes = secondContent.getDistributedNodes();
-
-is(secondDistNodes.length, 1, "There should be one distriubted node remaining after removing node from host.");
-ok(secondDistNodes[0].id == "three", "Span with id=two should have been removed from content element.");
-is(firstDistNodes.length, 3, "There should be three distributed nodes remaining after removing node from host.");
-ok(firstDistNodes[0].id == "one" &&
-   firstDistNodes[1].id == "three" &&
-   firstDistNodes[2].id == "four", "Reprojection through shadow should preserve node order.");
-
-// Check projection of <shadow> elements to <content> elements.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<span id="firstspan"><shadow></shadow></span>';
-thirdShadow = secondShadow.getElementById("firstspan").createShadowRoot();
-thirdShadow.innerHTML = '<content id="firstcontent"></content>';
-firstContent = thirdShadow.getElementById("firstcontent");
-var shadowChild = document.createElement("span");
-firstShadow.appendChild(shadowChild);
-
-is(firstContent.getDistributedNodes()[0], shadowChild, "Elements in shadow insertioin point should be projected into content insertion points.");
-
-// Remove child of ShadowRoot and check that projected node is removed from insertion point.
-firstShadow.removeChild(firstShadow.firstChild);
-
-is(firstContent.getDistributedNodes().length, 0, "Reprojected element was removed from ShadowRoot, thus it should be removed from content insertion point.");
-
-// Check deeply nested projection of <shadow> elements.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-firstShadow.innerHTML = '<content></content>';
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<shadow><content></content></shadow>';
-thirdShadow = host.createShadowRoot();
-thirdShadow.innerHTML = '<span id="firstspan"><shadow><content></content></shadow></span>';
-var fourthShadow = thirdShadow.getElementById("firstspan").createShadowRoot();
-fourthShadow.innerHTML = '<content id="firstcontent"></content>';
-firstContent = fourthShadow.getElementById("firstcontent");
-host.innerHTML = '<span></span>';
-
-is(firstContent.getDistributedNodes()[0], host.firstChild, "Child of host should be projected to insertion point.");
-
-// Remove node and make sure that it is removed from distributed nodes.
-host.removeChild(host.firstChild);
-
-is(firstContent.getDistributedNodes().length, 0, "Node removed from host should be removed from insertion point.");
-
-// Check projection of fallback content through <shadow> elements.
-host = document.createElement("span");
-firstShadow = host.createShadowRoot();
-firstShadow.innerHTML = '<content><span id="firstspan"></span></content>';
-secondShadow = host.createShadowRoot();
-secondShadow.innerHTML = '<span id="secondspan"><shadow id="firstshadow"></shadow></span>';
-firstShadowElem = secondShadow.getElementById("firstshadow");
-thirdShadow = secondShadow.getElementById("secondspan").createShadowRoot();
-thirdShadow.innerHTML = '<content id="firstcontent"></content>';
-firstContent = thirdShadow.getElementById("firstcontent");
-
-is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content.");
-is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed.");
-
-// Add some content to the host (causing the fallback content to be dropped) and make sure distribution nodes are updated.
-
-var newElem = document.createElement("div");
-firstShadowElem.appendChild(newElem);
-
-is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from the host.");
-is(firstContent.getDistributedNodes()[0], newElem, "Distributed node should be from host, not fallback content.");
-
-// Remove the distribution node and check that fallback content is used.
-firstShadowElem.removeChild(newElem);
-
-is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content.");
-is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed after removing node from host.");
-
-</script>
-</body>
-</html>
-
@@ -250,10 +250,6 @@ partial interface Element {
  readonly attribute HTMLSlotElement? assignedSlot;
  [CEReactions, Unscopable, SetterThrows, Func="nsDocument::IsWebComponentsEnabled"]
           attribute DOMString slot;
-
-  // [deprecated] Shadow DOM v0
-  [Throws, Func="nsDocument::IsWebComponentsEnabled"]
-  ShadowRoot createShadowRoot();
 };

 Element implements ChildNode;
@@ -10,7 +10,7 @@
      }

      connectedCallback() {
-        let shadow = this.createShadowRoot();
+        let shadow = this.attachShadow({ mode: "open" });
        if (this.template) {
          let te = document.createElement('template');
          te.innerHTML = this.template;
@@ -1,16 +0,0 @@
-<!doctype html>
-<script>
-  // Test for content redistribution outside of the document.
-  // Passes if it doesn't assert.
-  let host = document.createElement('div');
-  host.innerHTML = "<div id='foo'></div>";
-
-  let shadowRoot = host.createShadowRoot();
-  shadowRoot.innerHTML = "<content select='#foo'></content>";
-
-  host.firstElementChild.removeAttribute('id');
-
-  // Move to the document, do the same.
-  document.documentElement.appendChild(host);
-  host.firstElementChild.setAttribute('id', 'foo');
-</script>
@@ -484,6 +484,5 @@ load 1308793.svg
 load 1308848-1.html
 load 1308848-2.html
 asserts(0-1) load 1343606.html # bug 1343948
-load 1404789-1.html
 load 1404789-2.html
 load 1419762.html
@@ -7,17 +7,15 @@
  <script>
    function insertShadowSVG() {
      var x = document.getElementById("x");
-      if (x.createShadowRoot) {
-        x.createShadowRoot();
-        x.shadowRoot.innerHTML =
-          '<svg width="50px" height="10px"> \
-             <switch> \
-               <foreignObject width="50px" height="50px"> \
-                 <div style="width: 100px; height: 10px; background: red;"></div> \
-               </foreignObject> \
-             </switch> \
-           </svg>';
-      }
+      x.attachShadow({ mode: "open" });
+      x.shadowRoot.innerHTML =
+        '<svg width="50px" height="10px"> \
+           <switch> \
+             <foreignObject width="50px" height="50px"> \
+               <div style="width: 100px; height: 10px; background: red;"></div> \
+             </foreignObject> \
+           </switch> \
+         </svg>';
      document.documentElement.removeAttribute("class");
    }
    window.addEventListener("MozReftestInvalidate", insertShadowSVG);
@@ -17,7 +17,6 @@ fuzzy-if(winWidget,12,100) == display-contents-style-inheritance-1-dom-mutations
 == display-contents-visibility-hidden-2.html display-contents-visibility-hidden-ref.html
 == display-contents-495385-2d.html display-contents-495385-2d-ref.html
 fuzzy-if(Android,7,3935) == display-contents-xbl.xhtml display-contents-xbl-ref.html
-fuzzy-if(Android,7,1186) pref(dom.webcomponents.enabled,true) == display-contents-shadow-dom-1.html display-contents-shadow-dom-1-ref.html
 == display-contents-xbl-2.xul display-contents-xbl-2-ref.xul
 asserts(1) == display-contents-xbl-3.xul display-contents-xbl-3-ref.xul # bug 1089223
 skip == display-contents-xbl-4.xul display-contents-xbl-4-ref.xul # fails (not just asserts) due to bug 1089223
@@ -7,11 +7,9 @@
  <script>
    function insertShadowMathML() {
      var x = document.getElementById("x");
-      if (x.createShadowRoot) {
-        x.createShadowRoot();
-        x.shadowRoot.innerHTML =
-          '<math><msup><mi>X</mi><mi>X</mi></msup></math>';
-      }
+      x.attachShadow({ mode: "open" });
+      x.shadowRoot.innerHTML =
+        '<math><msup><mi>X</mi><mi>X</mi></msup></math>';
      document.documentElement.removeAttribute("class");
    }
    window.addEventListener("MozReftestInvalidate", insertShadowMathML);
@@ -3,13 +3,8 @@
 <head>
  <script>
    function tweak() {
-      if (!document.body.createShadowRoot) {
-        document.documentElement.className = "";
-        return;
-      }
-
      var host = document.getElementById("host");
-      var shadow = host.createShadowRoot();
+      var shadow = host.attachShadow({ mode: "open" });

      var textNode = document.createTextNode(" World");
      shadow.appendChild(textNode);
@@ -52,7 +52,7 @@ window.GaiaSwitch = (function(win) {
  // Extend from the HTMLElement prototype
  class GaiaSwitch extends HTMLElement {
    connectedCallback() {
-      var shadow = this.createShadowRoot();
+      var shadow = this.attachShadow({ mode: "open" });
      this._template = template.content.cloneNode(true);
      this._input = this._template.querySelector('input[type="checkbox"]');

@@ -104,7 +104,7 @@ window.GaiaSwitch = (function(win) {
  var template = document.createElement('template');
  template.innerHTML = '<label id="switch-label" class="pack-switch">' +
      '<input type="checkbox">' +
-      '<span><content select="label"></content></span>' +
+      '<span><slot></slot></span>' +
    '</label>';

  // Register and return the constructor
@@ -3,7 +3,7 @@
 <script>
 window.onload = function() {
  var div = document.querySelector("div");
-  var shadow = div.createShadowRoot();
+  var shadow = div.attachShadow({ mode: "open" });
  shadow.innerHTML = "<p style='display: none'><span><i>x</i></span></p>";
  var p = shadow.lastChild;
  var span = p.firstChild;