nolanlawson / emoji-picker-element

A lightweight emoji picker for the modern web
https://nolanlawson.github.io/emoji-picker-element/
Apache License 2.0
1.49k stars 85 forks source link

Avoid resetting state if component is disconnected then immediately reconnected #312

Closed nolanlawson closed 1 year ago

nolanlawson commented 1 year ago

I was reading about how Vue implements web components here:

When the element's disconnectedCallback is invoked, Vue will check whether the element is detached from the document after a microtask tick.

  • If the element is still in the document, it's a move and the component instance will be preserved;
  • If the element is detached from the document, it's a removal and the component instance will be unmounted.

This seems really sensible. I think we can do the same thing.

nolanlawson commented 1 year ago

Vue implementation:

https://github.com/vuejs/core/blob/ce064a172b3b5bcb096b4984fe0c1a54177ac9c0/packages/runtime-dom/src/apiCustomElement.ts#L207-L215

https://github.com/vuejs/core/blob/ce064a172b3b5bcb096b4984fe0c1a54177ac9c0/packages/runtime-core/src/scheduler.ts#L53-L59