Use native connectedCallback/disconnectedCallback lifecycle hooks

[nolanlawson]

Currently LWC does not use the native custom element lifecycle hooks. Instead, we do global DOM patching:

https://github.com/salesforce/lwc/blob/3cb07f92c7b97c348db799665fda3efe9408678a/packages/%40lwc/engine-dom/src/apis/create-element.ts#L40-L62

To better align with native browser behavior and to avoid global patching, we should use native lifecycle hooks. This would also resolve several bugs, e.g. https://github.com/salesforce/lwc/issues/2609, https://github.com/salesforce/lwc/issues/1102, https://github.com/salesforce/lwc/pull/2709

Probably this would need to be done with a feature flag, so that we don't break existing users who may have made assumptions about timing/ordering of certain callbacks.

[git2gus[bot]]

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

[caridy]

This is supposed to be enabled by the #2724, which will allow us to eventually activate these one at a time.

[nolanlawson]

@caridy I thought the same thing, but ultimately it looks like it's orthogonal. We can solve one, the other, or both. In #2724 we are still using the synthetic connectedCallback/disconnectedCallback events. Unless I misunderstood something?