Provide / Inject issues with custom elements and inserting raw html

[coreymcg]

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.

[coreymcg]

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 });
}