Angular Tip: Get an active element of your document if it can be in a shadow DOM?

Updated on July 15, 2020     Kisan Patel

Problem:

How to get an active element of your document if it can be in a shadow DOM?

Solution:

/**
* Returns current active element, including shadow dom
*
* @return element or null
*/
export function getNativeFocused(documentRef: Document): Element | null {
   if (!documentRef.activeElement || !documentRef.activeElement.shadowRoot) {
       return documentRef.activeElement;
   }

   let element = documentRef.activeElement.shadowRoot.activeElement;

   while (element && element.shadowRoot) {
     element = element.shadowRoot.activeElement;
   }

   return element;
}