From c9a26e11f1c5bcd940ed3be053dd4c194eb4b165 Mon Sep 17 00:00:00 2001
From: Andrey Lushnikov <aslushnikov@gmail.com>
Date: Tue, 31 Oct 2017 12:02:16 -0700
Subject: [PATCH] fix(ElementHandle): teach ElementHandle to work with
 shadowdom (#1227)

Elements in shadow dom erroneously considered that they were detached
from document.

This patch starts using `Element.isConnected` instead of
`document.contains()` call.

Fixes #1061.
---
 lib/ElementHandle.js    |  2 +-
 test/assets/shadow.html | 17 +++++++++++++++++
 test/test.js            |  6 ++++++
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 test/assets/shadow.html

diff --git a/lib/ElementHandle.js b/lib/ElementHandle.js
index 408afa368cf..b83e7dbfacf 100644
--- a/lib/ElementHandle.js
+++ b/lib/ElementHandle.js
@@ -42,7 +42,7 @@ class ElementHandle extends JSHandle {
 
   async _scrollIntoViewIfNeeded() {
     const error = await this.executionContext().evaluate(element => {
-      if (!element.ownerDocument.contains(element))
+      if (!element.isConnected)
         return 'Node is detached from document';
       if (element.nodeType !== Node.ELEMENT_NODE)
         return 'Node is not of type HTMLElement';
diff --git a/test/assets/shadow.html b/test/assets/shadow.html
new file mode 100644
index 00000000000..7242e673b56
--- /dev/null
+++ b/test/assets/shadow.html
@@ -0,0 +1,17 @@
+<script>
+
+let h1 = null;
+let button = null;
+let clicked = false;
+
+window.addEventListener('DOMContentLoaded', () => {
+  const shadowRoot = document.body.attachShadow({mode: 'open'});
+  h1 = document.createElement('h1');
+  h1.textContent = 'Hellow Shadow DOM v1';
+  button = document.createElement('button');
+  button.textContent = 'Click';
+  button.addEventListener('click', () => clicked = true);
+  shadowRoot.appendChild(h1);
+  shadowRoot.appendChild(button);
+});
+</script>
diff --git a/test/test.js b/test/test.js
index d6f688ba87e..3b0bde150d4 100644
--- a/test/test.js
+++ b/test/test.js
@@ -1611,6 +1611,12 @@ describe('Page', function() {
       await button.click();
       expect(await page.evaluate(() => result)).toBe('Clicked');
     }));
+    it('should work for Shadow DOM v1', SX(async function() {
+      await page.goto(PREFIX + '/shadow.html');
+      const buttonHandle = await page.evaluateHandle(() => button);
+      await buttonHandle.click();
+      expect(await page.evaluate(() => clicked)).toBe(true);
+    }));
     it('should work for TextNodes', SX(async function() {
       await page.goto(PREFIX + '/input/button.html');
       const buttonTextNode = await page.evaluateHandle(() => document.querySelector('button').firstChild);