doesn't show any hierarchy inside the shadow root

11 views
Skip to first unread message

Max Waterman

unread,
Sep 12, 2017, 9:46:26 AM9/12/17
to weinre
I have just been trying to debug a problem with my web app on iPhone, from my MS Windows computer running WSL, but it is an app that uses Google Polymer with web components.

When I inspect the dom, unlike with Google Chrome's inspector, I cannot inspect the inside of my custom elements' shadow dom.

Does anyone know if there is any plan to add such support (or if I'm doing something wrong)?

Regards,

Max.

Patrick Mueller

unread,
Sep 12, 2017, 12:37:57 PM9/12/17
to weinre
Hi Max,

I'm not planning on adding additional features to weinre.

I'm willing to offer help to anyone that is, LMK.

For this particular issue, we'd need to find out if the information you are trying to get is available through normal JavaScript functions/properties.  Since you're running on iOS, which presumably doesn't have a real shadow dom, so must have some polyfill, I'm guessing there is some way to do this.  How you would get it without a polyfill if it's native (eg, on Chrome) would be a separate story.

Then figuring out how to display it in the existing UI.  Maybe easy, maybe hard, I don't really know, since I'm not familiar with how shadow dom bits make themselves visible in the debugger.

Max Waterman

unread,
Sep 12, 2017, 4:48:47 PM9/12/17
to weinre
OK, thanks for the reply. I understand that you're not adding any features.

mobile safari does have native shadow dom:


I did try forcing the web components polyfill to use shady dom, and that got me one level down, but then I had the same problem with the elements below it.

I ended up just using the console output, with console.logs....painful, but ultimately effective.

Of course, chrome works with either native or polyfilled - here is a snippet with native (from https://www.polymer-project.org/). The shadow-dom is under '#shadow-root'.



...and, from javascript, you'd access the shadow root of an element ($0) using, for example:

$0.shadowRoot.querySelectorAll('*')

I'm not sure what happens if the shadow root is 'closed'.

But, anyway, it's sort of academic....I have a Mac Mini on its way. Apple won on this occasion....sort of.

Regards,

Max.
Reply all
Reply to author
Forward
0 new messages