search

PlasmoHQ / plasmo

🧩 The Browser Extension Framework
https://www.plasmo.com
MIT License
10.59k stars 369 forks source link

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

Open balthild opened 2 months ago

balthild commented 2 months ago

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: https://github.com/whatwg/html/issues/7520

Is there any context that might help us understand?

No response

Code of Conduct