Skip to content

Fix innerHTML/innerText to coerce non-string values #333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dyk1454683243-sudo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix innerHTML/innerText to coerce non-string values #333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions cjs/interface/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,10 @@ class Element extends ParentNode {
return text.join('');
}

set innerText(text) {
this.textContent = text === null ? '' : String(text);
}

/**
* @returns {String}
*/
Expand Down
1 change: 1 addition & 0 deletions cjs/mixin/inner-html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ exports.getInnerHtml = getInnerHtml;
* @param {String} html
*/
const setInnerHtml = (node, html) => {
html = html === null ? '' : String(html);
const {ownerDocument} = node;
const {constructor} = ownerDocument;
const document = new constructor;
Expand Down
4 changes: 4 additions & 0 deletions esm/interface/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,10 @@ export class Element extends ParentNode {
return text.join('');
}

set innerText(text) {
this.textContent = text === null ? '' : String(text);
}

/**
* @returns {String}
*/
Expand Down
1 change: 1 addition & 0 deletions esm/mixin/inner-html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const getInnerHtml = node => node.childNodes.join('');
* @param {String} html
*/
export const setInnerHtml = (node, html) => {
html = html === null ? '' : String(html);
const {ownerDocument} = node;
const {constructor} = ownerDocument;
const document = new constructor;
Expand Down
15 changes: 15 additions & 0 deletions test/html/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

// #308 — non-string innerHTML / innerText must coerce like browsers
const {document: coerceDoc} = parseHTML('<!DOCTYPE html><html><head></head><body></body></html>');
coerceDoc.body.innerHTML = 1;
assert(coerceDoc.body.innerHTML, '1', 'innerHTML number coerce');
coerceDoc.body.innerHTML = null;
assert(coerceDoc.body.innerHTML, '', 'innerHTML null coerce');
coerceDoc.body.innerHTML = undefined;
assert(coerceDoc.body.innerHTML, 'undefined', 'innerHTML undefined coerce');
coerceDoc.body.innerText = 1;
assert(coerceDoc.body.innerText, '1', 'innerText number coerce');
assert(coerceDoc.body.textContent, '1', 'innerText number as text content');
coerceDoc.body.innerText = null;
assert(coerceDoc.body.innerText, '', 'innerText null coerce');
assert(coerceDoc.body.innerHTML, '', 'innerText null clears children');
2 changes: 0 additions & 2 deletions types/esm/html/style-element.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
*/
export class HTMLStyleElement extends TextElement implements globalThis.HTMLStyleElement {
get sheet(): any;
set innerText(value: string);
get innerText(): string;
[SHEET]: any;
}
import { TextElement } from './text-element.js';
Expand Down
1 change: 1 addition & 0 deletions types/esm/interface/element.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export class Element extends ParentNode implements globalThis.Element {
get tabIndex(): number;
set slot(value: any);
get slot(): any;
set innerText(text: string);
get innerText(): string;
set textContent(text: string);
/**
Expand Down
2 changes: 1 addition & 1 deletion types/esm/interface/image.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export function ImageClass(ownerDocument: any): {
readonly style: any;
tabIndex: number;
slot: any;
readonly innerText: string;
innerText: string;
textContent: string;
innerHTML: string;
outerHTML: string;
Expand Down
5 changes: 5 additions & 0 deletions worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7134,6 +7134,7 @@ const getInnerHtml = node => node.childNodes.join('');
* @param {String} html
*/
const setInnerHtml = (node, html) => {
html = html === null ? '' : String(html);
const {ownerDocument} = node;
const {constructor} = ownerDocument;
const document = new constructor;
Expand Down Expand Up @@ -7673,6 +7674,10 @@ let Element$1 = class Element extends ParentNode {
return text.join('');
}

set innerText(text) {
this.textContent = text === null ? '' : $String(text);
}

/**
* @returns {String}
*/
Expand Down