add element replaceChildren

Author: keithamus

src/element-replacechildren.ts

@@ -0,0 +1,34 @@
+export function replaceChildren(this: Element | Document | DocumentFragment, ...children: Node[]) {
+  while (this.firstChild) this.removeChild(this.firstChild)
+  this.append(...children)
+}
+
+/*#__PURE__*/
+export function isSupported(): boolean {
+  return (
+    'replaceChildren' in Element.prototype &&
+    typeof Element.prototype.replaceChildren === 'function' &&
+    'replaceChildren' in Document.prototype &&
+    typeof Document.prototype.replaceChildren === 'function' &&
+    'replaceChildren' in DocumentFragment.prototype &&
+    typeof DocumentFragment.prototype.replaceChildren === 'function'
+  )
+}
+
+/*#__PURE__*/
+export function isPolyfilled(): boolean {
+  return (
+    Element.prototype.replaceChildren === replaceChildren &&
+    Document.prototype.replaceChildren === replaceChildren &&
+    DocumentFragment.prototype.replaceChildren === replaceChildren
+  )
+}
+
+export function apply(): void {
+  if (!isSupported()) {
+    Element.prototype.replaceChildren =
+      Document.prototype.replaceChildren =
+      DocumentFragment.prototype.replaceChildren =
+        replaceChildren
+  }
+}

src/index.ts

@@ -3,6 +3,7 @@ import * as abortSignalTimeout from './abortsignal-timeout.js'
 import * as aggregateError from './aggregateerror.js'
 import * as arrayAt from './arraylike-at.js'
 import * as cryptoRandomUUID from './crypto-randomuuid.js'
+import * as elementReplaceChildren from './element-replacechildren.js'
 import * as eventAbortSignal from './event-abortsignal.js'
 import * as objectHasOwn from './object-hasown.js'
 import * as promiseAny from './promise-any.js'
@@ -26,7 +27,6 @@ const baseSupport =
   typeof globalThis === 'object' &&
   'entries' in FormData.prototype &&
   'toggleAttribute' in Element.prototype &&
-  'replaceChildren' in Element.prototype &&
   // ES2019
   'fromEntries' in Object &&
   'flatMap' in Array.prototype &&
@@ -50,6 +50,7 @@ export function isSupported() {
     aggregateError.isSupported() &&
     arrayAt.isSupported() &&
     cryptoRandomUUID.isSupported() &&
+    elementReplaceChildren.isSupported() &&
     eventAbortSignal.isSupported() &&
     objectHasOwn.isSupported() &&
     promiseAny.isSupported() &&
@@ -64,6 +65,7 @@ export function isPolyfilled() {
     aggregateError.isPolyfilled() &&
     arrayAt.isPolyfilled() &&
     cryptoRandomUUID.isPolyfilled() &&
+    elementReplaceChildren.isPolyfilled() &&
     eventAbortSignal.isPolyfilled() &&
     objectHasOwn.isPolyfilled() &&
     promiseAny.isPolyfilled() &&
@@ -77,6 +79,7 @@ export function apply() {
   aggregateError.apply()
   arrayAt.apply()
   cryptoRandomUUID.apply()
+  elementReplaceChildren.apply()
   eventAbortSignal.apply()
   objectHasOwn.apply()
   promiseAny.apply()

test/element-replacechildren.js

@@ -0,0 +1,26 @@
+import {apply, isPolyfilled, isSupported, replaceChildren} from '../lib/element-replacechildren.js'
+
+describe('replaceChildren', () => {
+  it('has standard isSupported, isPolyfilled, apply API', () => {
+    expect(isSupported).to.be.a('function')
+    expect(isPolyfilled).to.be.a('function')
+    expect(apply).to.be.a('function')
+    expect(isSupported()).to.be.a('boolean')
+    expect(isPolyfilled()).to.equal(false)
+  })
+
+  it('replaces all Element children with given nodes', async () => {
+    const el = document.createElement('div')
+    // eslint-disable-next-line github/no-inner-html, github/unescaped-html-literal
+    el.innerHTML = '<p></p><span>Hi</span>'
+    replaceChildren.call(el, 'X')
+    // eslint-disable-next-line github/no-inner-html
+    expect(el.innerHTML).to.eql('X')
+    const s = document.createElement('span')
+    // eslint-disable-next-line github/unescaped-html-literal
+    s.textContent = '<foo>'
+    replaceChildren.call(el, s)
+    // eslint-disable-next-line github/no-inner-html, github/unescaped-html-literal
+    expect(el.innerHTML).to.eql('<span>&lt;foo&gt;</span>')
+  })
+})