It's a little special here:
I have a shadowRoot b, which is inside a shadowRoot a. So it is a nested shadow root(I use polymer to build web-component, and I import material design component to my polymer project, which leads this situation)
I tried :

const temp = this.shadowRoot.querySelectorAll('mwc-fab.zoom-button');

and print temp in console: enter image description here Let me explain a bit more
the mwc-fab is a shadow root, which I can access through the querySelector method on above.
Now I want to have access the button which is the shadow root of mwc-fab, and then change the style of that shadow root with js,
but I don't know how.

2 Answers

Jack Bashford On

It'd work fine - try mdc-fab not mac-fab:

temp.querySelector("button.mdc-fab").style.color = "red";
abraham On

Since you have nested ShadowDOMs you need to query inside each of them.

const fab = this.shadowRoot.querySelector('mwc-fab.zoom-button');
const button = fab.shadowRoot.querySelector('button.mdc-fab');