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.