Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style v-bind will be invalid in teleport #4605

fxosleeping opened this issue Sep 16, 2021 · 6 comments

style v-bind will be invalid in teleport #4605

fxosleeping opened this issue Sep 16, 2021 · 6 comments


Copy link



Reproduction link

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

Copy link

WJCHumble commented Sep 17, 2021

@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.`)

  const setVars = () =>
    setVarsOnVNode(instance.subTree, getter(instance.proxy!))
  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())

Copy link

@WJCHumble Good catch.
I will check it later.

Copy link

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.

Copy link

gyhyfj commented Sep 7, 2022

same problem

Copy link

Rusinas commented Oct 22, 2022

Any updades on this? :(

Copy link

Same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging a pull request may close this issue.

7 participants