So I am trying find elements on a DOM that are hidden via CSS, for example this is how I am finding them with puppeteer

let hiddenSelectors = [];
    const all = document.getElementsByTagName("*");
    let style;
    for (var i = 0, max = all.length; i < max; i++) {
      style = window.getComputedStyle(all[i]);
      if (
        style.width == "0" ||
        style.height == "0" ||
        style.opacity == "0" ||
        style.display == "none" ||
        style.visibility == "hidden"
      ) {
        hiddenSelectors.push(all[i]);
      }
    }

I want to then mark these elements with an html tag (e.g. hidden=true), however, I don't want to change the rendered dom itself... so I can't use puppeteer.

My idea was to extract a page's MHTML with all the applied css and see if I can then take this similar approach with cheerio.

Does anyone know if/how to use MHTML with cheerio to search for these types of styles?

So basically I want to use puppeteer or mhtml to find elements that css hides, then mark that selector or parent selector on the html. So when processing that html we know what is hidden upon rendering.