fix: use native connected callback

Author: nolanlawson

packages/@lwc/engine-dom/src/apis/create-element.ts

@@ -4,16 +4,7 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-import {
-    assert,
-    assign,
-    isFunction,
-    isNull,
-    isObject,
-    isUndefined,
-    toString,
-    StringToLowerCase,
-} from '@lwc/shared';
+import { isFunction, isNull, isObject, toString, StringToLowerCase } from '@lwc/shared';
 import {
     createVM,
     connectRootElement,
@@ -22,53 +13,6 @@ import {
 } from '@lwc/engine-core';
 import { getUpgradableElement } from '../renderer';
 
-// TODO [#2472]: Remove this workaround when appropriate.
-// eslint-disable-next-line lwc-internal/no-global-node
-const _Node = Node;
-
-type NodeSlotCallback = (element: Node) => void;
-
-const ConnectingSlot = new WeakMap<any, NodeSlotCallback>();
-const DisconnectingSlot = new WeakMap<any, NodeSlotCallback>();
-
-function callNodeSlot(node: Node, slot: WeakMap<any, NodeSlotCallback>): Node {
-    if (process.env.NODE_ENV !== 'production') {
-        assert.isTrue(node, `callNodeSlot() should not be called for a non-object`);
-    }
-
-    const fn = slot.get(node);
-
-    if (!isUndefined(fn)) {
-        fn(node);
-    }
-
-    return node; // for convenience
-}
-
-// Monkey patching Node methods to be able to detect the insertions and removal of root elements
-// created via createElement.
-const { appendChild, insertBefore, removeChild, replaceChild } = _Node.prototype;
-assign(_Node.prototype, {
-    appendChild(newChild) {
-        const appendedNode = appendChild.call(this, newChild);
-        return callNodeSlot(appendedNode, ConnectingSlot);
-    },
-    insertBefore(newChild, referenceNode) {
-        const insertedNode = insertBefore.call(this, newChild, referenceNode);
-        return callNodeSlot(insertedNode, ConnectingSlot);
-    },
-    removeChild(oldChild) {
-        const removedNode = removeChild.call(this, oldChild);
-        return callNodeSlot(removedNode, DisconnectingSlot);
-    },
-    replaceChild(newChild, oldChild) {
-        const replacedNode = replaceChild.call(this, newChild, oldChild);
-        callNodeSlot(replacedNode, DisconnectingSlot);
-        callNodeSlot(newChild, ConnectingSlot);
-        return replacedNode;
-    },
-} as Pick<Node, 'appendChild' | 'insertBefore' | 'removeChild' | 'replaceChild'>);
-
 /**
  * EXPERIMENTAL: This function is almost identical to document.createElement with the slightly
  * difference that in the options, you can pass the `is` property set to a Constructor instead of
@@ -124,10 +68,14 @@ export function createElement(
                 mode: options.mode !== 'closed' ? 'open' : 'closed',
                 owner: null,
             });
-            ConnectingSlot.set(elm, connectRootElement);
-            DisconnectingSlot.set(elm, disconnectRootElement);
             wasComponentUpgraded = true;
         }
+        connectedCallback() {
+            connectRootElement(this);
+        }
+        disconnectedCallback() {
+            disconnectRootElement(this);
+        }
     }
     const element = new UpgradableConstructor(UserElement.prototype.constructor);
     if (!wasComponentUpgraded) {