-
Notifications
You must be signed in to change notification settings - Fork 13.4k
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
Make (Ionic) elements which refer to other (Ionic) elements be usable inside the shadow DOM of some other (non-Ionic) WebComponent.
Describe the Use Case
When using elements which have a reference to some other element (like a trigger or an <ion-datetime-button> referencing an <ion-datetime>) the search for the reference is always performed on the root document. I use these elements inside a shadow DOM of some other WebComponent. I would like these references to be searched within the shadow DOM first and if failing, be performed on the root document.
Describe Preferred Solution
No response
Describe Alternatives
No response
Related Code
Code wise this could probably be implemented without influencing existing code (except if you have the same identifier in your shadow DOM and your document root, but wondering if such a situation would be logical or only theoretical):
Every reference is searched using document.getElementById(id). If all these occurrences are replaced by a call to the following function getReferencedElement(this, id), it would try the local reference first.
function getReferencedElement(element, id) {
// Start searching within the elements shadow DOM or from document root
let rootNode = element.getRootNode();
let referencedElement = rootNode.getElementById(id);
if(referencedElement) {
return referencedElement;
}
// In case searched in shadow DOM (but did not find anything), search document root
if(rootNode !== document) {
return document.getElementById(id);
}
return null;
}
Above code is untested and meant to describe a general solution.
Additional Information
I'm happy to create a PR if this feature would be accepted for incorporation.