lwc
lwc copied to clipboard
salesforce
Move LWC Custom Element registration out of the global custom element registry
Description
When the engine inserts an element with a tag name that has already been registered in the customElements registry the following error is thrown: [object:vm Child (1)] cannot be recycled
Steps to Reproduce
https://playground.lwcjs.org/projects/cRmyBtcP8/1/edit
Expected Results
No error is thrown
Actual Results
[object:vm Child (1)] cannot be recycled
The problem here is that the LWC component is registered as a web component, but used from a template. In that case, we have the protections for the construction, in the case of a registered web component, it simply ignores the upgrade callback because its super will take care of the createVM, after construction, we know whether or not it is associated to a vm, and do some LWC specific work. All that works fine, but problem is when inserting it.
When inserting it, insertNodeHook is invoked, which runs the DOM operation to connect the element, when that happens, for a registered web component, it will kick off the connectedCallback, as a result, it will update the state of the vm to connected. After that operation, we have no way to know that this has happened already, and we go into the process of carry on the same thing again, hitting the issue.
This issue is subject to disappear once we finish the work on node reactions: https://github.com/salesforce/lwc/pull/2032/files, at that point, we will never need to carry on this check, and the insert flow will be just to invoke the insertNodeHook and nothing else, because whether it is a registered or not, the callback will take care of it.
