ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(overlays): fix deepContains wrt recursed children, nested shadows

Browse source
This commit is contained in:
Joren Broekema 2020-12-02 13:38:41 +01:00
parent 83359ac2b9
commit 7709d7c265
3 changed files with 60 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/itchy-tools-run.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/overlays': patch
---
Fix deep contains util to properly check multiple nested shadow roots, and do not set containsTarget to false when children deepContains returns false. This would undo a found target in another child somewhere that was found in an earlier recursion.

12
packages/overlays/src/utils/deep-contains.js
View file

@ -10,16 +10,14 @@ export function deepContains(el, targetEl) {
return true;
}
/** @param {HTMLElement} elem */
/** @param {HTMLElement|ShadowRoot} elem */
function checkChildren(elem) {
for (let i = 0; i < elem.children.length; i += 1) {
const child = /** @type {HTMLElement} */ (elem.children[i]);
if (child.shadowRoot) {
containsTarget = deepContains(child.shadowRoot, targetEl);
if (containsTarget) {
if (child.shadowRoot && deepContains(child.shadowRoot, targetEl)) {
containsTarget = true;
break;
}
}
if (child.children.length > 0) {
checkChildren(child);
}
@ -27,14 +25,12 @@ export function deepContains(el, targetEl) {
}
// If element is not shadowRoot itself
if (el instanceof HTMLElement) {
if (el.shadowRoot) {
if (el instanceof HTMLElement && el.shadowRoot) {
containsTarget = deepContains(el.shadowRoot, targetEl);
if (containsTarget) {
return true;
}
}
checkChildren(el);
}
return containsTarget;
}

48
packages/overlays/test/utils-tests/deep-contains.test.js
View file

@ -19,14 +19,20 @@ describe('deepContains()', () => {
<button id="light-el-1"></button>
</div>
`));
const lightEl = /** @type {HTMLElement} */ (element.querySelector('#light-el-1'));
const lightChildEl = /** @type {HTMLElement} */ (element.querySelector('#light-el-1'));
expect(deepContains(element, element)).to.be.true;
expect(deepContains(element, shadowElement)).to.be.true;
expect(deepContains(element, shadowElementChild)).to.be.true;
expect(deepContains(element, lightEl)).to.be.true;
expect(deepContains(element, lightChildEl)).to.be.true;
expect(deepContains(shadowElement, shadowElement)).to.be.true;
expect(deepContains(shadowElement, shadowElementChild)).to.be.true;
expect(deepContains(shadowRoot, shadowElementChild)).to.be.true;
// Siblings
expect(deepContains(element.firstElementChild, element.lastElementChild)).to.be.false;
// Unrelated
expect(deepContains(lightChildEl, shadowElementChild)).to.be.false;
});
it('returns true if element contains a target element with a shadow boundary in between, for multiple shadowroots', async () => {
@ -63,4 +69,42 @@ describe('deepContains()', () => {
expect(deepContains(shadowElement2, shadowElementChild2)).to.be.true;
expect(deepContains(shadowRoot2, shadowElementChild2)).to.be.true;
});
it('can detect containing elements inside multiple nested shadow roots', async () => {
const shadowNestedElement = await fixture('<div id="shadow-nested"></div>');
const shadowNestedRoot = shadowNestedElement.attachShadow({ mode: 'open' });
shadowNestedRoot.innerHTML = `
<button id="nested-el-1">Button</button>
<a id="nested-el-2" href="#foo">Href</a>
<input id="nested-el-3">
`;
const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<button id="el-1">Button</button>
<input id="el-3">
`;
shadowRoot.insertBefore(shadowNestedElement, shadowRoot.lastElementChild);
const element = /** @type {HTMLElement} */ (await fixture(html`
<div id="light">
${shadowElement}
<button id="light-el-1"></button>
</div>
`));
expect(deepContains(element, element.firstElementChild)).to.be.true;
expect(deepContains(element, element.firstElementChild.shadowRoot)).to.be.true;
expect(deepContains(element, element.firstElementChild.shadowRoot.children[1])).to.be.true;
expect(deepContains(element, element.firstElementChild.shadowRoot.children[1].shadowRoot)).to.be
.true;
expect(
deepContains(
element,
element.firstElementChild.shadowRoot.children[1].shadowRoot.lastElementChild,
),
).to.be.true;
});
});