Adding attributes to subcomponents

I’m trying to add attributes (id’s and custom ones) to input tags and subcomponents for Selenium testing in V23. https://discordapp.com/channels/732335336448852018/774369063454638141/1082742181028167780
This reply helped a lot but now I have the same problem with a IntegerField. This trick doesn’t seem to work as this.inputElement is evaluated as false for the following code. I assume the field name is different for this component but I don’t know how to tell the correct one.
component.getElement().executeJs(
“if (this.inputElement) { this.inputElement.setAttribute(‘id’, $0) }”, id);

I would also like to add an id to the step buttons for incrementing/decrementing as well in this component. Is this possible?
In general, is there a simple way to know how to navigate through the subelements of a component in javascript?

That’s shadowroots inside shadowroots. I’d try to avoid setting id’s to those, that might even cause issues in the implementation.

With browser dev tools you could focus the element and then use magic $0 variable push “.” in the console. That will then autocomplete js fields, but that might not be the way to go to solve your problem.

Probably a selector to the shadowroot would be better. That can also be inspected with shadowroot. Here is an example that has IntegerField open:

If you can work with ChromeDriver, I’d use something like this instead of setting id’s to internal elements:

WebElement element = driver.findElement(By.id("int-field"));
element.getShadowRoot().findElement(By.cssSelector("[part='increase-button']")).click();

The getSharowRoot still dont’ seem to work in Safari or Firefox driver though. For that you’d some other haxies that I don’t remember by heart.