diff --git a/lib/core/base/context/parse-selector-array.js b/lib/core/base/context/parse-selector-array.js index 4435664f41..d237508fb5 100644 --- a/lib/core/base/context/parse-selector-array.js +++ b/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)); } diff --git a/test/core/base/context.js b/test/core/base/context.js index 3a28ad0baa..410bfe09ab 100644 --- a/test/core/base/context.js +++ b/test/core/base/context.js @@ -16,7 +16,7 @@ describe('Context', () => { it('should not mutate exclude in input', () => { fixture.innerHTML = '
'; const context = { exclude: [['iframe', '#foo']] }; - // eslint-disable-next-line no-new + new Context(context); assert.deepEqual(context, { exclude: [['iframe', '#foo']] }); }); @@ -24,7 +24,7 @@ describe('Context', () => { it('should not mutate its include input', () => { fixture.innerHTML = ''; 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, + '', + `Content
` + ); + 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');