fix: replaceChildren compatible with lower versions (#321)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/component",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Visualization components for AntV, based on G.",
   "license": "MIT",
   "main": "lib/index.js",

src/ui/tooltip/index.ts

@@ -1,7 +1,7 @@
 import { substitute, createDOM } from '@antv/util';
 import { Component } from '../../core';
 import { Group } from '../../shapes';
-import { BBox, applyStyleSheet } from '../../util';
+import { BBox, applyStyleSheet, replaceChildren } from '../../util';
 import { getClassNames, getDefaultTooltipStyle } from './constant';
 import type { TooltipOptions, TooltipPosition, TooltipStyleProps } from './types';
 
@@ -131,7 +131,7 @@ export class Tooltip extends Component<TooltipStyleProps> {
     const { content } = this.attributes;
     if (!content) return;
     if (typeof content === 'string') this.element.innerHTML = content;
-    else this.element.replaceChildren(content);
+    replaceChildren(this.element, content);
   }
 
   /**
@@ -151,11 +151,7 @@ export class Tooltip extends Component<TooltipStyleProps> {
       const itemsElements = this.HTMLTooltipItemsElements;
       const ul = document.createElement('ul');
       ul.className = CLASS_NAME.LIST;
-      if (ul.replaceChildren) ul.replaceChildren(...itemsElements);
-      else {
-        ul.innerHTML = '';
-        ul.append(...itemsElements);
-      }
+      replaceChildren(ul, itemsElements);
       const list = this.element.querySelector(`.${CLASS_NAME.LIST}`);
       if (list) list.replaceWith(ul);
       else container.appendChild(ul);

src/util/index.ts

@@ -38,3 +38,4 @@ export * from './transform';
 export * from './transpose';
 export * from './traverse';
 export * from './visibility';
+export * from './replace-children';

src/util/replace-children.ts

@@ -0,0 +1,20 @@
+export const replaceChildren = (el: HTMLElement, content: string | HTMLElement | HTMLElement[]) => {
+  if (content == null) {
+    el.innerHTML = '';
+    return;
+  }
+  if (el.replaceChildren) {
+    if (Array.isArray(content)) {
+      el.replaceChildren(...content);
+    } else {
+      el.replaceChildren(content);
+    }
+  } else {
+    el.innerHTML = '';
+    if (Array.isArray(content)) {
+      content.forEach((child) => el.appendChild(child));
+    } else {
+      el.appendChild(content as HTMLElement);
+    }
+  }
+};