style v-bind will be invalid in teleport

[fxosleeping]

Version

3.2.9

Reproduction link

sfc.vuejs.org/

Steps to reproduce

use v-bind in <style>
add the class to the child of teleport

What is expected?

style is valid

What is actually happening?

style is invalid

[WJCHumble]

@edison1105 Yesterday, I wrote the same code as you to solve this issue, but when I delete the child of the teleport and then add the child to the teleport, the setVarsOnVNode function is not triggered.

Then I found that the MutationObserver in the useCssVars function is to observe the instance.subTree.el.parentNode, which is the DOM of #app，but the teleport child is atteched to the body 😂.

export function useCssVars(getter: (ctx: any) => Record<string, string>) {
  if (!__BROWSER__ && !__TEST__) return

  const instance = getCurrentInstance()
  /* istanbul ignore next */
  if (!instance) {
    __DEV__ &&
      warn(`useCssVars is called without current active component instance.`)
    return
  }

  const setVars = () =>
    setVarsOnVNode(instance.subTree, getter(instance.proxy!))
  watchPostEffect(setVars)
  onMounted(() => {
    const ob = new MutationObserver(setVars)
    // In this case, the `instance.subTree.el!.parentNode` is equal to the DOM of `#app`
    ob.observe(instance.subTree.el!.parentNode, { childList: true })
    onUnmounted(() => ob.disconnect())
  })
}

[edison1105]

@WJCHumble Good catch.
I will check it later.

[livthomas]

I have also run into this issue. It took me a while to realize it's actually caused by teleport. Because sometimes you use a slot of either your or a third-party component and you don't know what exactly will happen to the content you're passing in. There can be teleport used inside and then you are wondering why v-bind doesn't work in your styles. It would be nice to have this fixed.

For example, Vue could detect a teleport somewhere down the component tree from where v-bind is used and then define CSS custom properties not only on the top-level component element but also on the child nodes inside teleport.

[gyhyfj]

same problem

[Rusinas]

Any updades on this? :(

[daniluk4000]

Same problem