Webcomponents undefining workaround?

radames · February 10, 2022, 6:24pm

I’ve recently talked to @tomlarkworthy about reusable components inside Observablehq. We’ve thought webcomponents as a great way to abstract and encapsulate logic and styles while taking advantage of Observable dataflow. Then I came across this issue, @mbostock noticed back in 2019

github.com/WICG/webcomponents

Cleaning up (undefining) custom elements?

opened 05:51AM - 06 Jul 18 UTC

closed 05:08PM - 16 Mar 19 UTC

trusktr

I notice many web-based libs/APIs focus on creation without reciprocal destructi…on mechanisms. They assume that cleanup happens when the "web page" is closed. A long running, wanting-to-be-robust, web application might like to unload elements if it knows they are not being used on the page any more (f.e. it switched to another client-side route). It may like to lose references to classes, and can fetch the relevant JS (cached) later. Would it make sense to be able to unregister elements, to free up memory?

I wonder if there is any workaround to invalidate/redefine or any hacks to improve the developer experience better than refreshing the page or recreating multiple distinct elements.

shancarter · February 10, 2022, 8:20pm

Here’s a possible solution, setting a flag that randomly modifies the custom element name on edits so you can see the updates as you work: Web Components / Observable / Observable

radames · February 11, 2022, 8:07pm

thank you @shancarter that’s a very useful solution!

mootari · February 16, 2022, 2:53pm

This comment suggests to use the component constructor as a proxy to the actual implementation:

github.com/WICG/webcomponents

Updating Element Registration.

opened 07:00PM - 22 Jun 19 UTC

pshihn

custom-elements

Are there any discussions to support updating the implementation of a custom ele…ment definition? (Searched and did not spot anything obvious) Something like this: ```javascript 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.

Topic		Replies	Views
Web components on Observable Community Help	4	1853	November 18, 2019
New tool to use React with Observable	8	1584	August 21, 2019
Circular dependency challenge for grouped UI components	3	534	May 8, 2020
Why do I get JavaScript undefined property in Observable but not in HTML? Community Help	3	3052	April 1, 2018
Update react component without re-rendering entire element Community Help	14	4013	September 6, 2018

Webcomponents undefining workaround?

Related topics