diff --git a/lighthouse-core/report/v2/renderer/details-renderer.js b/lighthouse-core/report/v2/renderer/details-renderer.js
index 582db9556324..d82248fdb93f 100644
--- a/lighthouse-core/report/v2/renderer/details-renderer.js
+++ b/lighthouse-core/report/v2/renderer/details-renderer.js
@@ -85,6 +85,8 @@ class DetailsRenderer {
 
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = DetailsRenderer;
+} else if (self) {
+  self.DetailsRenderer = DetailsRenderer;
 }
 
 /** @typedef {{type: string, text: string|undefined, header: DetailsJSON|undefined, items: Array<DetailsJSON>|undefined}} */
diff --git a/lighthouse-core/report/v2/renderer/dom.js b/lighthouse-core/report/v2/renderer/dom.js
index 5eaed54b92e1..2a7015a6380f 100644
--- a/lighthouse-core/report/v2/renderer/dom.js
+++ b/lighthouse-core/report/v2/renderer/dom.js
@@ -48,13 +48,21 @@ class DOM {
    * @throws {Error}
    */
   cloneTemplate(selector) {
-    const template = this._document.querySelector(selector);
+    const template = this._retrieveTemplate(selector);
     if (!template) {
       throw new Error(`Template not found: template${selector}`);
     }
     return this._document.importNode(template.content, true);
   }
 
+  /**
+   * @param {string} selector
+   * @return {!DocumentFragment} The original template content
+   */
+  _retrieveTemplate(selector) {
+    return this._document.querySelector(selector);
+  }
+
   /**
    * @param {string} text
    * @return {!HTMLSpanElement}
@@ -87,4 +95,6 @@ class DOM {
 
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = DOM;
+} else if (self) {
+  self.DOM = DOM;
 }
diff --git a/lighthouse-core/report/v2/renderer/report-renderer.js b/lighthouse-core/report/v2/renderer/report-renderer.js
index 8ca875422bfc..2d26f653c8f5 100644
--- a/lighthouse-core/report/v2/renderer/report-renderer.js
+++ b/lighthouse-core/report/v2/renderer/report-renderer.js
@@ -57,9 +57,10 @@ function formatNumber(number) {
 class ReportRenderer {
   /**
    * @param {!Document} document
+   * @param {!DOM} DOM
+   * @param {!DetailsRenderer} DetailsRenderer
    */
-  constructor(document) {
-    this._dom = new DOM(document);
+  constructor(document, DOM, DetailsRenderer) {
     this._detailsRenderer = new DetailsRenderer(this._dom);
   }
 
@@ -183,6 +184,8 @@ class ReportRenderer {
 
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = ReportRenderer;
+} else if (self) {
+  self.ReportRenderer = ReportRenderer;
 }
 
 /** @typedef {{id: string, weight: number, score: number, result: {description: string, displayValue: string, helpText: string, score: number|boolean, details: DetailsRenderer.DetailsJSON|undefined}}} */
diff --git a/lighthouse-core/report/v2/report-template.html b/lighthouse-core/report/v2/report-template.html
index 019c68ff6090..e06c03e08d5e 100644
--- a/lighthouse-core/report/v2/report-template.html
+++ b/lighthouse-core/report/v2/report-template.html
@@ -30,7 +30,7 @@
   <script>%%LIGHTHOUSE_JAVASCRIPT%%</script>
   <script>window.__LIGHTHOUSE_JSON__ = %%LIGHTHOUSE_JSON%%;</script>
   <script>
-    const renderer = new ReportRenderer(document);
+    const renderer = new ReportRenderer(document, DOM, DetailsRenderer);
     document.body.appendChild(renderer.renderReport(window.__LIGHTHOUSE_JSON__));
   </script>
 </body>