Use native connectedCallback/disconnectedCallback lifecycle hooks

[nolanlawson]

We use non-standard mechanisms to trigger connectedCallback/disconnectedCallback. We should just use the native mechanism instead.

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

Lines 50 to 72 in 551f634

	// 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'>);

This has implications for backwards compat, because the timing and other subtleties will be different.

Related: #2609, #1102, #2709

Also related: #2986 which added a flag, without making the flag true by default.

[git2gus]

This issue has been linked to a new work item: W-12114614