Model-viewer: API to get the state of the viewer

[hatsumatsu]

Does the current API provide a way to react to the viewer's state like "loading", "ready", "not supported" etc.?
Use cases are displaying custom loading and error messages and providing custom fallbacks.

[elalish]

Yes, you'll want to look at the events we expose which are toward the bottom of https://modelviewer.dev/. If there are any you feel are missing, please request them here.

[hatsumatsu]

Brilliant, was missing this part of the docs.

I feel an init event might be helpful to determine when modelviewer starts taking over the <model-viewer> element.
Same case could be handled with a method to programmatically init an instance that was added at runtime.

[elalish]

I'd recommend reading up on custom elements and lit-element, as that's what we're build on. I believe they already incorporate that functionality. For instance, you can use this CSS to hide child elements before the custom element loads.

:not(:defined) > * {
    display: none;
  }

[hatsumatsu]

The CSS based approach is indeed interesting!

If I understand the custom elements specs / lit-element docs correctly their lifecycle (in case of initialisation something like connected) provides internal callbacks but no events that can be listened to from outside of the element like the existing ar-status event, or am I missing something?

[elalish]

I found the following at https://developers.google.com/web/fundamentals/web-components/customelements

customElements.whenDefined('model-viewer').then(() => {
  console.log('model-viewer defined');
});