Add ElementInternals.shadowRoot which returns both open and closed roots

mfreed7 · chromium-wpt-export-bot · commit b2c5875bc1c3 · 2020-08-12T09:22:45.000-07:00
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
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>
