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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2350739 Commit-Queue: Mason Freed <masonfreed@chromium.org> Auto-Submit: Mason Freed <masonfreed@chromium.org> Reviewed-by: Kouhei Ueno <kouhei@chromium.org> Cr-Commit-Position: refs/heads/master@{#797729}
web-platform-tests · Aug 13, 2020 · 9734707 · 9734707
1 parent 5ad3513
commit 9734707
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:masonfreed@chromium.org">
+<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>