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

@@ -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';

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>

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);