ImageElements doesn't include CSS images in pseudo-elements

[brendankenny]

ImageElements loops over all elements in the page looking for computed styles looking for elements with a background-image style, but pseudo-elements can't be accessed via the DOM like that.

As a result, any image in a ::before, ::after, etc isn't included in the artifact and missed in the image audits that rely on it (OptimizedImages does pick up on them because it filters network records on resource/mime types instead, but then an audit like modern-image-formats can't join the results with ImageElements so the details don't include a node for the images)

Example page: https://earthy-picayune-albertonykus.glitch.me/ (lighthouse logo not in ImageElements despite being the only image in the page)

[connorjclark]

re: getElementsInDocument, only image-elements calls it w/o any parameters so that's the only instance that we are missing out on PEs. We could tack onto the data collected in-page w/ the DOM.snapshot protocol for PEs.

also
devtoolsNodePath would need to know about PEs... or we'd have to change this code:

lighthouse/core/audits/preload-lcp-image.js

Line 96 in fd304ed

return elem.node.devtoolsNodePath === lcpElement.node.devtoolsNodePath;

isInShadowDOM might be hard but could prob. select the element in page and figure it out.