From 62a07ca39bace3ec2265926c1b73d207c341c922 Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Mon, 27 Feb 2023 11:58:19 -0800
Subject: [PATCH] Remove `innerHTML` uses in the demo.

---
 demo/index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 78270ca..c7785df 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -66,7 +66,7 @@
         }
         .output {
           margin-top: 20px;
-          word-wrap: break-word;
+          white-space: pre-wrap;
           font-family: monospace;
         }
       </style>
@@ -110,7 +110,7 @@ <h3><code>iron-form</code> works with native and custom elements, and can preven
         </iron-form>
         <script>
           form1.addEventListener('iron-form-submit', function(event) {
-            this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+            this.querySelector('.output').innerText = JSON.stringify(event.detail, undefined, 2);
           });
         </script>
       </template>
@@ -139,7 +139,7 @@ <h3>You can submit a form in many different ways: by manually calling <code>subm
         </iron-form>
         <script>
           form2.addEventListener('iron-form-submit', function(event) {
-            this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+            this.querySelector('.output').innerText = JSON.stringify(event.detail, undefined, 2);
           });
         </script>
       </template>
@@ -161,7 +161,7 @@ <h3>To customize the request sent to the server, you can listen to the <code>iro
             this.request.params['sidekick'] = 'Robin';
           });
           form3.addEventListener('iron-form-submit', function(event) {
-            this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+            this.querySelector('.output').innerText = JSON.stringify(event.detail, undefined, 2);
           });
         </script>
       </template>
@@ -186,7 +186,7 @@ <h3>Example of an <code>iron-form</code> reacting to state changes</h3>
         </iron-form>
         <script>
           form4.addEventListener('iron-form-submit', function(event) {
-            this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+            this.querySelector('.output').innerText = JSON.stringify(event.detail, undefined, 2);
             spinner.active = false;
             spinner.hidden = true;
             form4Submit.disabled = false;
@@ -226,7 +226,7 @@ <h3>Iron-form respects the <code>novalidate</code> form attribute</h3>
         </iron-form>
         <script>
           form5.addEventListener('iron-form-submit', function(event) {
-            this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+            this.querySelector('.output').innerHTML = JSON.stringify(event.detail, undefined, 2);
           });
         </script>
       </template>
@@ -252,7 +252,7 @@ <h3><code>iron-form</code> respects nested elements</h3>
         </iron-form>
         <script>
           form6.addEventListener('iron-form-submit', function(event) {
-            this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
+            this.querySelector('.output').innerHTML = JSON.stringify(event.detail, undefined, 2);
           });
         </script>
       </template>