make bodyContains() handle possibly nested shadow root's #2532
Conversation
|
no opinion on this @kgscialdone do you have one? Definitely needs tests if it is to be accepted though. |
|
This is... acceptable. Recursive checks like this are gross but there isn't really a better way. |
|
@kgscialdone , @1cg - I propose to solve this via htmx extension. That way its up to the user to iterate and fetch the host node. function getRootNode(elt) {
// custom logic to iterate nodes and return host
const node = /* ... */
return node;
}
htmx.defineExtension("body-contains-elem", {
bodyContains: function (elt) {
const node = getRootNode(elt);
return document.body.contains(node);
}
})The revised function bodyContains(elt) {
let exists = undefined;
// process extension
withExtensions(asElement(elt), function (extension) {
exists = extension.bodyContains(elt);
})
if (exists === true || exists === false) {
return exists;
}
// original implementation
const rootNode = elt.getRootNode && elt.getRootNode();
if (rootNode && rootNode instanceof ShadowRoot) {
return getDocument().body.contains(rootNode.host);
} else {
return getDocument().body.contains(elt);
}
}Let me know if this solution is acceptable, I can raise PR for it. |
|
@innovation-stack I'm unclear why solving this with an extension would be preferable to simply solving it, even if the solution is a little gross. Could you elaborate on why? |
|
@kgscialdone - For performance reasons.
Few notes:
Proposed solution:
Let me know your thoughts on this. |
|
@innovation-stack I see where you're coming from, thank you for the explanation. However, I don't think that relegating a fix for this to extensions is the right approach from a logistical point of view, as it puts the impetus on developers using HTMX to handle the problem rather than on HTMX itself. That said, on further inspection of the use cases of function documentContains(elt) {
return elt.getRootNode({ composed: true }) === getDocument()
} |
|
@kgscialdone : Thank you for the explanation. I agree with your solution. Its elegant. |
Description
make bodyContains() handle the case where elt might be inside nested shadow dom's
Testing
Tested manually with and without nested shadow dom's
Checklist
masterfor website changes,devforsource changes)
approved via an issue
npm run test) and verified that it succeeded