Webcomponents: Updating Element Registration.

[pshihn]

Are there any discussions to support updating the implementation of a custom element definition? (Searched and did not spot anything obvious)

Something like this:

customElements.define('my-element', MyElement);
// ...
// some time later...
customElements.redefine('my-element', MyElement2);

I can see a lot of issues with this, the obvious one being what happens to existing elements that are already in the DOM - are they recreated? left alone with old implementation? Or just turned into no-ops?

Use case

Let's say, I have a web component that is sitting on a page with long life time .- say email client or stock dashboard which people have open all the time and rarely 'refresh'.

The client code at some point realized there's a new version of my-element available and I want to upgrade it to the latest without reloading the whole page.

This is particularly useful if there's some sort of change in the protocol/api the custom element may use with the back end.

[annevk]

Have you tried implementing this in user space via a proxy class of sorts? Introducing "replace" semantics at the DOM-level would be a quite significant undertaking.

[rniwa]

Given most of native apps don't have the ability to monkey patch itself while running, I have a hard time believing that many web apps would opt to do this. Why can't such an app periodically reload itself (e.g. once a week)? Or if not, use some kind of versioning so that new elements are of a different name? I fully agree with @annevk's statement above that the need for a feature of this immense complexity and cost would need to be very well vetted in user land first.

[pshihn]

Refreshing the page is not really an option.

In any case, I didn't think this would be easily implemented. It was more about what people's thoughts were about the idea and if there was something obvious I was missing

[mantou132]

Support for redefine will make hot replacement easy to implement.

class MyElement extends HTMLElement {}
customElements.define('my-element', MyElement);

...
if (customElements.get('my-element')) {
  customElements.redefine('my-element', MyElement2);
  customElements.upgrade(document.documentElement);
}

[pshihn]

hot replacement with new version of the code on a page as well, not just for development. In some cases a better option than asking the user to refresh the page. It's tricky though, because nodes on the page already be part of the DOM. Initially I thought of this as only for new nodes.

[bahrus]

Given most of native apps don't have the ability to monkey patch itself while running, I have a hard time believing that many web apps would opt to do this.

One significant difference between native apps and web apps, is that web apps tend to load progressively. It would be nice to be able to create a "basic" version of a component, and a "deluxe" version with far more bells and whistles.

Imagine a simple grid component, for example, that just shows data in a tabular format, but then could be replaced by a fully functional grid featuring sorting, charting, etc., once all the dependencies are downloaded.

There are some tricky issues here, just from a "spec" point of view -- like could property values or other state settings be transferred?

But just wanted to throw out another use case.