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

Provide / Inject issues with custom elements and inserting raw html #5096

Closed
Rkaede opened this issue Dec 12, 2021 · 1 comment · Fixed by #5098
Closed

Provide / Inject issues with custom elements and inserting raw html #5096

Rkaede opened this issue Dec 12, 2021 · 1 comment · Fixed by #5098
Assignees

Comments

@Rkaede
Copy link

Rkaede commented Dec 12, 2021

Version

3.2.26

Reproduction link

stackblitz.com

Steps to reproduce

View the output in the repo to see that the second example of my-component is not displaying the injected value from provide-a. It only displays the provide value from the closest element.

What is expected?

In the provided repo there are 3 custom elements created with vue. 2 of the elements provide a value and injects both of them.

If the custom elements are used within a vue component template then my-component has access to both the provided values from provide-a and provide-b. If the custom elements are inserted through <div v-html="myHtml"></div> or directly through innerHTML the same behaviour is expected.

What is actually happening?

Only the closest provide value from provide-b is available to the my-component. The value from provide-a is not available.


The use case for this is loading html (with custom elements) from a server as a string and inserting it into the page.

@Rkaede
Copy link
Author

Rkaede commented Dec 12, 2021

As a workaround for any components that provide a value I relay any parent values through a context object.

// provide-b composition api example
setup(props) {
  const context = inject('context', {});
  provide('context', { ...context, b: props.b });
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants