clients(viewer): stop using legacy DOM api (#15964)

viewer/app/src/lighthouse-report-viewer.js

@@ -15,8 +15,7 @@ import {ReportRenderer} from '../../../report/renderer/report-renderer.js';
 import {TextEncoding} from '../../../report/renderer/text-encoding.js';
 import {renderFlowReport} from '../../../flow-report/api';
 
-// @ts-expect-error Legacy use of report renderer
-const dom = new DOM(document);
+const dom = new DOM(document, document.documentElement);
 
 /* global logger ReportGenerator */
 
@@ -216,15 +215,16 @@ export class LighthouseReportViewer {
       return;
     }
 
-    const renderer = new ReportRenderer(dom);
+    rootEl.classList.add('lh-root', 'lh-vars');
+    const reportDom = new DOM(document, rootEl);
+    const renderer = new ReportRenderer(reportDom);
 
     renderer.renderReport(json, rootEl, {
       occupyEntireViewport: true,
     });
 
-    const features = new ViewerUIFeatures(dom, {
+    const features = new ViewerUIFeatures(reportDom, {
       saveGist: saveGistCallback,
-      /** @param {LH.Result} newLhr */
       refresh: newLhr => {
         this._replaceReportHtml(newLhr);
       },
@@ -258,11 +258,11 @@ export class LighthouseReportViewer {
   // TODO: Really, `json` should really have type `unknown` and
   // we can have _validateReportJson verify that it's an LH.Result
   _replaceReportHtml(json) {
-    const container = dom.find('main', document);
+    const container = dom.find('main');
 
     // Reset container content.
     container.textContent = '';
-    const rootEl = document.createElement('div');
+    const rootEl = dom.createElement('div');
     container.append(rootEl);
 
     // Only give gist-saving callback if current report isn't from a gist.