Re: [w3c/webcomponents] JavaScript bundlers, HMR and customElements.define() (#829)

Thank you for the many responses. Based on the suggestion of using a `Proxy` by @rniwa, @vegarringdal and me developed a general purpose polyfill for HMR with custom elements. It's not yet perfect, but it works without noticeable side-effects for now.

You can try it out by installing the npm package: [custom-elements-hmr-polyfill](https://www.npmjs.com/package/custom-elements-hmr-polyfill)

The essential implementation details are:

Here: [`customElements.define` runtime override](https://github.com/vegarringdal/custom-elements-hmr-polyfill/blob/master/src/package/polyfill/overrideCustomElementDefine.ts#L20)

and here: [lifecycle function call delegation](https://github.com/vegarringdal/custom-elements-hmr-polyfill/blob/master/src/package/polyfill/createHookClass.ts#L4)

Apart from that we created an interactive example (_although this containerized example forces a full-page refresh, but shows that the polyfill works_):
https://glitch.com/edit/#!/vegarringdal-custom-elements-hmr-polyfill

If you clone the repo and execute `npm bootstrap && npm start` you will see the actual HMR working.

<img width="1434" alt="Bildschirmfoto 2019-08-27 um 00 22 50" src="https://user-images.githubusercontent.com/454817/63728363-b2e23f00-c863-11e9-9192-45d9b1a016ec.png">

<img width="802" alt="Bildschirmfoto 2019-08-26 um 23 17 13" src="https://user-images.githubusercontent.com/454817/63728371-b8d82000-c863-11e9-89da-819df51d5873.png">

In this example, [fuse-box v4](https://github.com/fuse-box/fuse-box) does the HMR part.

But exactly as @rniwa noted, the limitation is `observedAttributes`. If the code of a custom element changes and returns different attribute names to observe, this change is not reflected.

I'd suggest a function like `customElements.update(name: string, constructor: Function, options?: ElementDefinitionOptions | undefined)`. Calling this function would invalidate the [native internal cache](https://github.com/chromium/chromium/blob/6446ad0b33fd4a85923f0a46074375e6a91f11e8/third_party/blink/renderer/core/dom/element_rare_data.h#L139) and also call the static getter `observedAttributes` again. 

Doing so would imply no regression and just enable a new feature safely.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/829#issuecomment-525064177