8000 Injection breaks when nesting Vue custom elements · Issue #13212 · vuejs/core · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Injection breaks when nesting Vue custom elements #13212

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.

Sign up for GitHub

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

Jump to bottom
Open
jessevanassen opened this issue Apr 16, 2025 · 2 comments · May be fixed by #13219
Open

Injection breaks when nesting Vue custom elements #13212

jessevanassen opened this issue Apr 16, 2025 · 2 comments · May be fixed by #13219
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope: custom elements

Comments

@jessevanassen
Copy link
jessevanassen commented Apr 16, 2025 •
edited
Loading

Vue version

3.5.0 - 3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNrlVcFu2kAQ/ZXVqpKNRIwi2gshSG3EIT00VdNbHTXIHmCpvbvaXVMkxL93dtYG2ySohx4ilQNiZ96M386bZ/b8o9bJtgI+4VObGaEds+AqPUslY6LUyjgWJaOHyoGZF1CCdImz0U03fS9lPz0dhXbYCA8OSl0sHFDbqfLdriDgZ9NR9+xrW3g+5M5mSi7FKtlYJZHp3ndJeaZKLQowD9oJJW3KJ4wyPrcoCvX7M8WcqWDYxLM1ZL9eiG/szsdS/tWABbOFlB9zbmFW4EJ6/vgFdvj7mCxVXhWIvpD8BlYVlecYYJ8qmSPtFo7Y3tM4hVx9t/OdA2mbS3miHnkgfMpRrrsLVz/RHSfvqS6VB5xiT0OcYy3gnuWwFBLuKutUWSPYgS2NKsPjUo6K9tFIQcnLSCE3kF0CrM9zqUSxrWO0FA2Z25coxv5yPTJxPQZa4njQTIWx0NSuFwZybBeYxVEIRANa6BOOHt6C0fkMJfzat1B0JlSDM0jDSIZEbmfsRxP1n3Uc5WIbDc+i62sMRiQWqy0RDepN6ZU+PxL7CXu3D/c4PL+GpH4eSDd5HUdO9ji6Sxf31D5gCUEa20aDJvdUTwnXDr9CTS1DsHFlAN868ULrlj54SrRRW5HDURWcw5k+HVyQBWFdfcKTUxmUyNo7Y5OwMHXtkf2ws2+DG/RL76X21v1Cavy3fiGx3q5f/oEnTru+BWNEnoO86o+5UxCmiwWnMf+1ObrWHnaWi8zxE0n4Pyh0xTj5kFyP+eEPRwulpQ==

Steps to reproduce

Create two custom elements using Vue's defineCustomElement (outer-component and inner-component). In both defineCustomElement calls, use configureApp to provide a value. Then, nest inner-component within outer-component.

What is expected?

I expect that both custom elements get their own isolated injection scope. Values that are provided on inner-component are not visible on outer-component, and vice versa.

Or, even if inner-component has access to the values provided by outer-component, I expect that it definitely has access to the values provided on inner-component and those have precedence.

What is actually happening?

The injection scope of outer-component is applied to inner-component.

This means that when using inject in inner-component, only values that are provided on outer-component can be injected. Values provided on inner-component are not injectable within inner-component.

System Info



Any additional comments?


No response

      		
    

      
  





        



            
            

              
            

        

      


      
    








      

    



      

  
            

    

      
    

    


      

          @edison1105
edison1105




            added
      

  🔨 p3-minor-bug

  Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.

      

  scope: custom elements


  labels


      Apr 16, 2025

    

  



  


  
    
  
  

    
  adrianbrs 

      added a commit
        to adrianbrs/vuejs-core
      that referenced
      this issue

    
      Apr 17, 2025
    
      
        
      
    

      


  

    

      


  

      
        @adrianbrs
  





      

        
          fix(custom-elements): allow injecting values ​​from app context in ne…
        

          
            
          

      


      

          

    
    
    

  

      


      

      


      
      

        
          4fae27c
        
      

    

  

    

      
…sted elements

Before this change, when a custom element was nested within another, the values provided via `configureApp` were ignored. Now, the provides object in the app context of a custom element inherits the provides object from its parent, allowing values to be injected properly using the app context in nested custom elements.

Close vuejs#13212

    




    

  




  

  

    
  


  

      

    @adrianbrs
adrianbrs



    linked a pull request
    
      Apr 17, 2025
    

    that will
    close
    this issue





  


  

      
   Open

  







  









      

  
      



  

  @Sanderovich





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  


  
    

      

      
            Sanderovich
  

      

      

      commented


  
8000
      May 12, 2025


      
  •

  

    
      

        
          edited
          
        
        
      

    
    
      
        
      Loading

    
  



    


  




      


        


  
    

      
          
Awesome PR @adrianbrs! Is there any update on the pull request (@edison1105)? I would love for it to land :D

      		
    

  





        


            

            
            

              
            

        

      


      

            
  

    
  
    
    

  

  


    












      

  
      



  

  @edison1105





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
  Member


      

  


  
    

  




      


        


  
    

      
          
@Sanderovich

I've marked the PR as ready to merge and planning to merge.

      		
    

  





        


            

            
            

              
            

        

      


      

            
  

    
  
    
    

  

  


    
















  
  

    

      

  





  




  
  

              

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


  



  






  
                  




    

  


      
  

    Assignees
  



        

    No one assigned







      


  


  

    Labels
  



    

      

    🔨 p3-minor-bug

  Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
  

    scope: custom elements









      

  

    

        

    Projects
  


        




    None yet




  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    
  




      

    

  
      

  

    

      3 participants
    

    

        
          @jessevanassen 
        
          @edison1105 
        
          @Sanderovich 
    

  






    

    




    






  

          

        



    



  





    

  


  


          



    



  

    

    

    





    


    

    

  



0