Skip to content

feat: Allow triggers and other references to be used inside shadow DOM of other WebComponent #30752

@ErikOnBike

Description

@ErikOnBike

Prerequisites

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions