[Blazor] Attributes of HTML custom elements not yet initialized when connectedCallback() is invoked

[ranabuelo]

Custom HTLM elements are usually initialized from the connectedCallback using the attributes from the DOM. Browsers therefore set all attributes at the custom element before the callback gets invoked.

In Blazor, however, element attributes are set after invoking the connectedCallback. This seems to happen in the BrowserRenderer.insertElement function where insertLogicalChild is called before the attributes are actually being applied. Moving the insertLogicalChild() call to the end of the function seems to solve the issue.

Occurred with Blazor 0.7.0.

[mkArtakMSFT]

Thanks for contacting us, @ranabuelo.
This is not something we plan to do in the near future, yet we would happily consider a PR if you'd send one.

[mkArtakMSFT]

@ranabuelo could you also share details about what you are trying to do? How would you use such a feature?

[ranabuelo]

My use cases are straightforward:

• Use web components from 3rd-party frameworks in Razor Components.
• Share web components between ASP.Net projects and plain HTML/Javascript projects.

When I used the same custom HTML element in a plain HTML/Javascript project, it worked fine. But it didn't work with Blazor because the connectedCallback was called before attributes have been set by Blazor, whereas in a static HTML context, browsers first set all attributes before invoking the connectedCallback. So right now I consider this to be a bug rather than a feature request...

I'll try to test with a recent preview version and provide a PR for it. Unfortunately, I don't get preview 3 running with VS 2019 because of issue #8384. So I probably need to wait for preview 4.

[ma499]

Did you get a chance to try it out @ranabuelo?

Like you I’m interested in using Web Components within Blazor apps.

[githubfanster]

i am also interested in similar scenarios as discussed here by @ranabuelo. it would be nice to have blazor playing well with html custom elements

[veikkoeeva]

For the reference, some component libraries: https://open-wc.org/faq/component-libraries.html. From the referenced #10170, though this might be achieavable via JS interop -- looks like it -- a good experience with Web APIs and ability to author web components with Blazor would be nice.

Extending to the improbable, but to make this more complete, maybe also doing rendering like lit-html, hyperHTML and other string templating engines are doing (yes, there is RenderTree). Some more consideration to this in the linked #10170.

[jspuij]

@SteveSandersonMS Picking this one up for the Blazor July sprint.