[EXP] Styles are lost when shadow root is re-mounted

[balthild]

What is the example you wish to see?

https://github.com/PlasmoHQ/examples/tree/main/with-emotion

@emotion/cache uses HTMLStyleElement.sheet (a CSSStyleSheet instance) to insert CSS rules into the style tag. The rules inserted with this API are not persisted. When a style tag is removed from and and re-inserted into the DOM tree, the sheet property will be destroyed and recreated.

However, @emotion/cache assumes that the style tag will never be removed from the DOM, making the components to be unstyled if the root container is re-mounted due to changes of anchors.

A workaround would be to reset styleCache.inserted when the component is unmounted. This workaround only works for the cases of single anchor / single root container.

useLayoutEffect(() => () => {
    styleCache.inserted = {};
}, []);

It would also be better to show how to make the styleCache scoped to each root container in the example. Currently it is a global singleton.

See: whatwg/html#7520

Is there any context that might help us understand?

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.