Selenium access multiple shadow dom elements in a dropdown?

Question

I have a dropdown list which I'd like to click on one of the items and track some activity on the page.

My HTML Structure looks something like this

    <slot>
    #shadowroot
    <myoption-cmp> #shadowroot <some anchor text>
    <myoption-cmp> #shadowroot <some anchor text>
    </slot>

.....

If you can see there are 2 <myoption-cmp> elements, I tried using findElements(By.cssSelector('myoption-cmp'). I keep getting "org.openqa.selenium.WebDriverException: javascript error: Cannot read property 'querySelectorAll' of null". My Sample Selenium Code:

WebElement solt = parentElement.findElement(By.cssSelector("slot"));
WebElement shadowSlot = expandShadow(slot);
List<WebElement> menuCmp = shadowSlot.findElements(By.cssSelector("myoption-cmp"));
// I expect to get the list of elements nd then I'd like to access it as below.
WebElement shadow2 = expandShadow(menuCmp.get(0));
WebElement anchor = shadow2.findElement(By.cssSelector("a"));
anchor.click();  

Just wondering if I'm doing anything wrong.

I tried using findElement and findElements, but both gave me errors like "org.openqa.selenium.WebDriverException: javascript error: Cannot read property 'querySelector/querySelectorAll' of null".

Any help or suggestions are appreciated.

Answer 1

Was able to find the solution. I need to use

findElementInShadowRoot(shadowSlot, By.cssSelector('myoption-cmp'));

and then expand that element to access the child elements below the second shadow.