Accessing parent Shadow DOM elements using child elements - selenium

Question

Shadow Dom structure:
In the above shadow dom structure we are able to access the individual elements using the selenium and javascript as below in chrome:
In Firefox:
//div[#class='style-scope rock-tabs' and not(#hidden)]//div/span[contains(text(),'"+AttrName+"')]/../preceding-sibling::div/paper-icon-button[1]/iron-icon[1]
In Chrome:
We are using the below to navigate to the iron-icon
WebElement Attrbuttona1=Button2.findElement(By.id("contentViewManager"));
WebElement eAttrbutton1=expandRootElement(Attrbuttona1);
WebElement Attrbutton2=eAttrbutton1.findElement(By.id("contentViewManager"));
WebElement Attrbutton2a=Attrbutton2.findElement(By.xpath("rock-content-view[#name='entity-manage']"));
WebElement eAttrbutton2=expandRootElement(Attrbutton2a);
WebElement Attrbutton3=eAttrbutton2.findElement(By.id("content-view-container"));
WebElement Attrbuttona3=Attrbutton3.findElement(By.id("component"));
WebElement eAttrbutton3=expandRootElement(Attrbuttona3);
WebElement Attrbutton4=eAttrbutton3.findElement(By.className("content"));
WebElement AttrTagName2=Attrbutton4.findElement(By.tagName("rock-tabs"));
WebElement eaAttrbutton4=expandRootElement(AttrTagName2);
WebElement Attrbutton5=eaAttrbutton4.findElement(By.id(attrType));
WebElement eAttr1=expandRootElement(Attrbutton5);
WebElement Attr2=eAttr1.findElement(By.className("group-container"));
WebElement Attr3=Attr2.findElement(By.tagName("rock-attribute"));
WebElement eAttr3=expandRootElement(Attr3);
WebElement Attri4=eAttr3.findElement(By.className("attribute-icons"));
WebElement Attr4=Attri4.findElement(By.tagName("paper-icon-button"));
WebElement eAttr4=expandRootElement(Attr4);
WebElement Attr5=eAttr4.findElement(By.tagName("iron-icon"));
((JavascriptExecutor) driver).executeScript("arguments[0].click();",Attr5);
public WebElement expandRootElement(WebElement element) {
WebElement ele = (WebElement) ((JavascriptExecutor) driver)
.executeScript("return arguments[0].shadowRoot",element);
return ele;
}
Now i want to click on iron icon for attribute where div/span[text()='Product Name']
Taking the child element as a base and i need to traverse back to shadow element and get the icon related to only that particular attribute.
How can i proceed in clicking the element based on a different element and traverse back, which should be supported in all browsers(chrome and firefox)?

Answer 1

In JavaScript, if you want to "traverse back" from an element called element1:
To get a parent element, use its parentElement attribute. You can do it recursively if the element you want is higher in the tree.
element1.parentElement
To get the Shadow DOM element, invoke getRootNode() to get the Shadow DOM root and use its host attribute to get its host element.
element1.getRootNode().host
Note: Since it's JavaScript code, it should be executed in Selenium's executeScript() method.