Use a data: URL for template.

Author: BigBlueHat

credentials/html-render-method/credential.json

@@ -22,7 +22,7 @@
       "/issuer/name",
       "/credentialSubject/name"
     ],
-    "template": "<div>\n  <script>\n    document.addEventListener('DOMContentLoaded', (event) => {\n    console.log('running template render script');\n\n    // display credential as JSON as an example renderer; anything\n    // could be done here instead, including mustache/other-style\n    // template processing to generate the HTML for display\n\n    // FIXME: determine best name/location for the datablock/script tag\n    const credential = JSON.parse(document.querySelector(\n      'head > script[name=\"credential\"]').innerHTML);\n\n    document.querySelector('#credentialSubject-name').innerText =\n      credential.credentialSubject.name;\n    document.querySelector('#issuer-name').innerText =\n      credential.issuer.name;\n\n    // TBD: signal to host that rendering is complete\n    window.renderMethodReady();\n});  </script>\n  <style>\n    h1 {\n      color: blue;\n    }\n  </style>\n\n  <h1 id=\"credentialSubject-name\"></h1>\n  <p>Issued by: <span id=\"issuer-name\"></span></p>\n</div>",
+    "template": "data:text/html,<div>\n  <script>\n    document.addEventListener('DOMContentLoaded', (event) => {\n    console.log('running template render script');\n\n    // display credential as JSON as an example renderer; anything\n    // could be done here instead, including mustache/other-style\n    // template processing to generate the HTML for display\n\n    // FIXME: determine best name/location for the datablock/script tag\n    const credential = JSON.parse(document.querySelector(\n      'head > script[name=\"credential\"]').innerHTML);\n\n    document.querySelector('#credentialSubject-name').innerText =\n      credential.credentialSubject.name;\n    document.querySelector('#issuer-name').innerText =\n      credential.issuer.name;\n\n    // TBD: signal to host that rendering is complete\n    window.renderMethodReady();\n});  </script>\n  <style>\n    h1 {\n      color: blue;\n    }\n  </style>\n\n  <h1 id=\"credentialSubject-name\"></h1>\n  <p>Issued by: <span id=\"issuer-name\"></span></p>\n</div>",
     "outputPreference": {
       "mode": [
         "visual"