fix(core): stop ignoring shadow roots in context

lib/core/base/context/parse-selector-array.js

@@ -16,6 +16,14 @@ export function parseSelectorArray(context, type) {
     if (item instanceof window.Node) {
       if (item.documentElement instanceof window.Node) {
         result.push(context.flatTree[0]);
+      } else if (item.host instanceof window.Node) {
+        // Item is a shadow root. We only cache instances of `Element`,
+        // not `DocumentFragment`, so instead of the shadow root itself,
+        // we'll push all of its children to context.
+        const children = Array.from(item.children).map(child =>
+          getNodeFromTree(child)
+        );
+        result.push(...children);
       } else {
         result.push(getNodeFromTree(item));
       }

test/core/base/context.js

@@ -16,15 +16,15 @@ describe('Context', () => {
   it('should not mutate exclude in input', () => {
     fixture.innerHTML = '<div id="foo"></div>';
     const context = { exclude: [['iframe', '#foo']] };
-    // eslint-disable-next-line no-new
+
     new Context(context);
     assert.deepEqual(context, { exclude: [['iframe', '#foo']] });
   });
 
   it('should not mutate its include input', () => {
     fixture.innerHTML = '<div id="foo"></div>';
     const context = { include: [['#foo']] };
-    // eslint-disable-next-line no-new
+
     new Context(context);
     assert.deepEqual(context, { include: [['#foo']] });
   });
@@ -109,6 +109,19 @@ describe('Context', () => {
       assert.equal(result.include[0].props.id, 'target');
     });
 
+    it('accepts a reference to a ShadowRoot', () => {
+      createNestedShadowDom(
+        fixture,
+        '<article id="shadowHost"></article>',
+        `<h1 id="h1">Heading</h1>
+				<p id="p">Content</p>`
+      );
+      const shadowHost = fixture.querySelector('#shadowHost');
+      const shadowRoot = shadowHost.shadowRoot;
+      const result = new Context(shadowRoot);
+      assert.deepEqual(selectors(result.include), ['#h1', '#p']);
+    });
+
     it('accepts a node reference consisting of nested divs', () => {
       const div1 = document.createElement('div');
       const div2 = document.createElement('div');