fix: coerce non-string innerHTML/innerText values

cjs/interface/element.js

@@ -176,6 +176,13 @@ class Element extends ParentNode {
     return text.join('');
   }
 
+  set innerText(text) {
+    text = text === null ? '' : String(text);
+    this.replaceChildren();
+    if (text !== '')
+      this.appendChild(new Text(this.ownerDocument, text));
+  }
+
   /**
    * @returns {String}
    */

cjs/mixin/inner-html.js

@@ -2,7 +2,7 @@
 const {ELEMENT_NODE, DOCUMENT_FRAGMENT_NODE} = require('../shared/constants.js');
 const {CUSTOM_ELEMENTS} = require('../shared/symbols.js');
 const {parseFromString} = require('../shared/parse-from-string.js');
-const {ignoreCase} = require('../shared/utils.js');
+const {ignoreCase, String} = require('../shared/utils.js');
 
 
 /**
@@ -21,7 +21,7 @@ const setInnerHtml = (node, html) => {
   const {constructor} = ownerDocument;
   const document = new constructor;
   document[CUSTOM_ELEMENTS] = ownerDocument[CUSTOM_ELEMENTS];
-  const {childNodes} = parseFromString(document, ignoreCase(node), html);
+  const {childNodes} = parseFromString(document, ignoreCase(node), html === null ? '' : String(html));
 
   node.replaceChildren(...childNodes.map(setOwnerDocument, ownerDocument));
 };

esm/interface/element.js

@@ -178,6 +178,13 @@ export class Element extends ParentNode {
     return text.join('');
   }
 
+  set innerText(text) {
+    text = text === null ? '' : String(text);
+    this.replaceChildren();
+    if (text !== '')
+      this.appendChild(new Text(this.ownerDocument, text));
+  }
+
   /**
    * @returns {String}
    */

esm/mixin/inner-html.js

@@ -1,7 +1,7 @@
 import {ELEMENT_NODE, DOCUMENT_FRAGMENT_NODE} from '../shared/constants.js';
 import {CUSTOM_ELEMENTS} from '../shared/symbols.js';
 import {parseFromString} from '../shared/parse-from-string.js';
-import {ignoreCase} from '../shared/utils.js';
+import {ignoreCase, String} from '../shared/utils.js';
 
 
 /**
@@ -19,7 +19,7 @@ export const setInnerHtml = (node, html) => {
   const {constructor} = ownerDocument;
   const document = new constructor;
   document[CUSTOM_ELEMENTS] = ownerDocument[CUSTOM_ELEMENTS];
-  const {childNodes} = parseFromString(document, ignoreCase(node), html);
+  const {childNodes} = parseFromString(document, ignoreCase(node), html === null ? '' : String(html));
 
   node.replaceChildren(...childNodes.map(setOwnerDocument, ownerDocument));
 };

test/html/element.js

@@ -159,3 +159,18 @@ assert(node.innerHTML, '<video src="" controls></video>');
 node.innerHTML = '<div>The <strong>quick</strong> brown fox</div><div>Jumped over<br>The lazy\ndog</div>';
 assert(node.innerText, 'The quick brown fox\nJumped over\nThe lazy dog', 'innerText newlines');
 assert(node.textContent, 'The quick brown foxJumped overThe lazy\ndog', 'textContent no newlines');
+
+// non-string coercion (issue #308)
+node.innerHTML = 1;
+assert(node.innerHTML, '1', 'innerHTML coerces number');
+node.innerHTML = null;
+assert(node.innerHTML, '', 'innerHTML coerces null');
+node.innerHTML = undefined;
+assert(node.innerHTML, 'undefined', 'innerHTML coerces undefined');
+
+node.innerText = 1;
+assert(node.innerText, '1', 'innerText coerces number');
+node.innerText = null;
+assert(node.innerText, '', 'innerText coerces null');
+node.innerText = 'sanity';
+assert(node.innerText, 'sanity', 'innerText normal string');