1711468 - Enable the :screenshot helper function to target Shadow DOM

Status: UNCONFIRMED

(DevTools :: General, enhancement, P3)

Description

[Kai [:schweinepriester]]

Attachment: overview.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36

Steps to reproduce:

1. Visit e.g. https://caniuse.com/css-sticky
2. Attempt to take a high resolution screenshot using :screenshot --dpr 4 of an element within a shadow-root, e.g. this one described by this selection: document.querySelector('ciu-feature-list').shadowRoot.querySelector('.feature-list-wrap')
3. Be unable to do so, because --selector of :screenshot only accepts CSS selectors (for which there are currently none to target Shadow DOM)

Actual results:

Not possible.

Workaround:
Target the closest element which is not inside shadow-root. But then you need the edit the screenshot afterwards to cut out what you don't want. Also could prevent some cases where the overhead makes higher values for --dpr impossible.

Expected results:

I'd like to be able to target any element. One way could be to create a parameter to directly supply the element you want to take a screenshot of, for example --element.

Looks like the context menu action in the inspector pane is capable of taking such a screenshot and does exactly that, using the element. I've found https://bugzilla.mozilla.org/show_bug.cgi?id=1498143 => https://bugzilla.mozilla.org/attachment.cgi?id=9021462&action=diff while searching.
But that context menu action does not have the parameters :screenshot has, esp. not --dpr.
Reference for the parameters: https://developer.mozilla.org/en-US/docs/Tools/Taking_screenshots#taking_screenshots_with_the_web_console

Maybe related:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1483143
• https://bugzilla.mozilla.org/show_bug.cgi?id=1482807