1871814 - Link to statement that attached Shadow DOM

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Sebastian Zartner [:sebo]]

When a Shadow DOM is added imperatively via JS, the markup view should link from the #shadow-root node to the statement that attached the Shadow DOM in the Debugger.

Sebastian

Comment 1

[Julian Descottes [:jdescottes]]

We show a custom button in the markupview for webcomponents, which leads to the debugger.

Sebo, do you have a test case here?

Comment 2

[Sebastian Zartner [:sebo]]

Attachment: simple test case

The custom badge links from a custom element to its constructor.

What I am requesting is linking from a shadow root to the attachShadow() statement. That's important for debugging shadow DOMs independently from the custom elements they are attached to.
Note that Shadow DOMs, while mostly used in combination with custom elements, are actually a separate concept. They can also be attached to normal HTML elements.

So, in the attached test case, I'd expect a badge and/or a context menu entry for #shadow root (open) that refers to line 4 of the source within the Debugger, where the attachShadow() method is called.

Sebastian