Add ElementInternals.shadowRoot which returns both open and closed roots

See [1] for context. This CL adds the shadowRoot attribute to ElementInternals, which allows custom elements to access their own shadow roots, including in the case that the shadowRoot is closed. Without this capability, custom elements that use closed declarative shadow roots would have no ability to retrieve the contents of their own shadow root. Bug: 1042130 [1] WICG/webcomponents#871 (comment) Change-Id: I33606144bec3c27600d2e67f108d0344f7696dd2
web-platform-tests · Aug 12, 2020 · b2c5875 · b2c5875
1 parent 3fce2a5
commit b2c5875
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/shadow-dom/declarative/element-internals-shadowroot.tentative.html b/shadow-dom/declarative/element-internals-shadowroot.tentative.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>ElementInternals.shadowRoot</title>
+<link rel="author" title="Mason Freed" href="mailto:[email protected]">
+<link rel="help" href="https://github.com/w3c/webcomponents/issues/871">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+
+test(() => {
+  let constructed = false;
+  customElements.define('custom-open', class extends HTMLElement {
+    constructor() {
+      super();
+      const elementInternals = this.attachInternals();
+      assert_equals(elementInternals.shadowRoot, null);
+      const shadow = this.attachShadow({mode: 'open'});
+      assert_equals(elementInternals.shadowRoot, shadow);
+      constructed = true;
+    }
+  });
+  const element = document.createElement('custom-open');
+  assert_true(constructed);
+}, 'ElementInternals.shadowRoot allows access to open shadow root');
+
+test(() => {
+  let constructed = false;
+  customElements.define('custom-closed', class extends HTMLElement {
+    constructor() {
+      super();
+      const elementInternals = this.attachInternals();
+      assert_equals(elementInternals.shadowRoot, null);
+      const shadow = this.attachShadow({mode: 'closed'});
+      assert_equals(elementInternals.shadowRoot, shadow);
+      assert_equals(this.shadowRoot, null);
+      constructed = true;
+    }
+  });
+  const element = document.createElement('custom-closed');
+  assert_true(constructed);
+}, 'ElementInternals.shadowRoot allows access to closed shadow root');
+
+</script>