CSS variables do not work with top level Suspense component

[tcsnyder]

Version

3.0.0-rc.4

Reproduction link

https://github.com/tcsnyder/vue3-suspense-css-vars

Steps to reproduce

In App.vue have a top level suspense component. Set up a css variable in the component and include it in the style tag.

sfc-style-variables

In the #fallback and #default templates of the suspense components use the css variable for a style.

What is expected?

the css variable works in the suspense #fallback and #template

What is actually happening?

since the suspense component is not rendered in the DOM the css variables are being lost

---

if the suspense component is not the top level component, then it works as expected. Workaround for now is to wrap the suspense component in a div