Lwc: Issues with custom elements & @wire

[priandsf]

Description

The @wire adapters are not invoked on web components instantiated added as custom elements ion certain cases.

Steps to Reproduce

Clone this sample project that shows the issue: https://github.com/priandsf/lwc-wire-customelement
Execute it, and you can see "Hello world" string provided by the wire adapter. The LWC component is created using createElement(), it works.
Now change the CUSTOM_ELEMENT constant in options.js to true. The LWC component is now created through a custom element in the markup, and the string doesn't appear anymore. The wire adapter is not invoked at all, breakpoints are not hit in the debugger.
Last test: change template.html in /public, by moving the lwc-component script tag above the custom element tag. Then it works again.

Looks like a life cycle issue when the custom element is instantiated.

Playground cannot be used for this issue. Provided a Github repo instead

Browsers Affected

all

Version

• LWC: 1.4.0

[caridy]

hmm, this is interesting, I will have to debug it. In principle, those two things are not the same. One creates the element and upgrade it (createElement from lwc), while the other let the browser to create the element from htnml, and eventually upgrade it. But in both cases the connect hook should be picking up the action, and act accordingly for the adapter.

[caridy]

Ok, got a chance to debug this, the issue is not the component initialization or lifecycle, the problem is that the wire adapter is registered too late, after the construction path for the component is done.

You can validate this by adding a breakpoint on registerWireService method. I believe this is going to be solved by the wire reform (pending to be merged), because that will not rely on the LWC services anymore, not need to register your adapter. cc @jodarove since he is the main contact for the wire reform.

Additionally, to solve this today, we need to guarantee that the order of the bundle that you're building register the adapters before attempting to run your initialization code, that should fix it as well.

[priandsf]

I tried to register the adapter as soon as possible from main.js but the result is identical. Anyway, I'll wait for the wire reform and see if this is fix. @jodarove what is the ETA for this merge?

[caridy]

ETA is monday!

[jodarove]

@priandsf is the issue solved with the wire-reform? can we close it?

[priandsf]

I haven't moved my wire adapters to the new API yet - I'll do it and let you know.