diff --git a/src/utils/dom/selectNodesWithShadow.js b/src/utils/dom/selectNodesWithShadow.js index 6760104a3..3bdf01251 100644 --- a/src/utils/dom/selectNodesWithShadow.js +++ b/src/utils/dom/selectNodesWithShadow.js @@ -19,7 +19,7 @@ const splitWithShadow = selector => { }; const transformPrefix = (parent, selector) => { - const result = selector.trim(); + const result = selector; const hasChildCombinatorPrefix = startsWith(result, ">"); if (!hasChildCombinatorPrefix) { return result; @@ -54,8 +54,15 @@ export default (context, selector) => { // find each subselector element based on the previously selected node's shadowRoot let parent = context; for (let i = 0; i < parts.length; i += 1) { - const part = transformPrefix(parent, parts[i]); - const partNode = querySelectorAll(parent, part); + const part = parts[i].trim(); + // if part is empty, it means there's a chained :eq:shadow selector + if (part === "" && parent.shadowRoot) { + parent = parent.shadowRoot; + // eslint-disable-next-line no-continue + continue; + } + const prefixed = transformPrefix(parent, part); + const partNode = querySelectorAll(parent, prefixed); if (partNode.length === 0 || !partNode[0] || !partNode[0].shadowRoot) { return partNode; diff --git a/test/unit/specs/utils/dom/selectNodesWithShadow.spec.js b/test/unit/specs/utils/dom/selectNodesWithShadow.spec.js index 942103e4c..1cd21d650 100644 --- a/test/unit/specs/utils/dom/selectNodesWithShadow.spec.js +++ b/test/unit/specs/utils/dom/selectNodesWithShadow.spec.js @@ -147,6 +147,39 @@ describe("Utils::DOM::selectNodesWithShadow", () => { expect(result[0].textContent).toEqual("Buy Now"); }); + it("should select when chained :eq:shadow selector", () => { + if (ieDetected()) { + return; + } + + defineCustomElements(); + + const content = ` +
+ FirstButton + SecondButton + FirstOrder + SecondOrder + +
`; + + appendNode( + document.body, + createNode( + "DIV", + { id: "abc", class: CLEANUP_CLASS }, + { innerHTML: content } + ) + ); + + const result = selectNodesWithEq( + "#abc:eq(0) > FORM:nth-of-type(1) > PRODUCT-ORDER:eq(1):shadow > *:eq(0) > BUY-NOW-BUTTON:eq(0):shadow > DIV:nth-of-type(1) > LABEL:nth-of-type(1)" + ); + + expect(result[0].tagName).toEqual("LABEL"); + expect(result[0].textContent).toEqual("Buy Now"); + }); + it("should respect child selectors", () => { const content = `