Add cross-browser support for checking if a node is in the DOM

Author: Ben Grynhaus

libs/core/src/lib/renderer/react-content.ts

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Omit } from '../declarations/omit';
+import * as dom from '../utils/dom';
 
 const DEBUG = false;
 export const CHILDREN_TO_APPEND_PROP = 'children-to-append';
@@ -48,7 +49,7 @@ export class ReactContent extends React.PureComponent<AllReactContentProps> {
       const hostElement = this.props.legacyRenderMode ? element : element.parentElement;
 
       // Only add children not already in the DOM
-      this.props[CHILDREN_TO_APPEND_PROP].filter(child => !child.isConnected).forEach(child =>
+      this.props[CHILDREN_TO_APPEND_PROP].filter(child => !dom.isNodeInDOM(child)).forEach(child =>
         hostElement.appendChild(child)
       );
     }

libs/core/src/lib/utils/dom/dom-utils.ts

@@ -0,0 +1,7 @@
+/**
+ * Checks if a node is in the DOM.
+ *
+ * @param node The node to check
+ * @returns whether the node is in the DOM
+ */
+export const isNodeInDOM = (node: Node) => node.isConnected || document.body.contains(node);

libs/core/src/lib/utils/dom/index.ts

@@ -0,0 +1 @@
+export * from './dom-utils';