Within a custom component defined with <template> and <slot> tags, a child element can get the parent element that is the custom component, and then use this element reference to access class defined vars and functions.
However, how can a child element know which element is the custom component?
The template itself is contained in a shadow DOM. When rendering a custom component on the page, this shadow DOM is cloned and attached into the custom component as its host.
Elements that are slotted in to the custom component however can’t seem to tell the node tree it is attached to came from a shadow DOM node that was cloned, and can’t tell which element in the current DOM tree is the top level custom component unless it iterates through each parentNode to check if they have a shadowRoot.
What is the way to let a child element inside a custom component access the custom component’s class variables and functions?