fix(custom-elements): ensure custom elements can inherit provides fro…

…m ancestors (#5098)

fix #5096

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -337,6 +337,52 @@ describe('defineCustomElement', () => {
       await nextTick()
       expect(consumer.shadowRoot!.innerHTML).toBe(`<div>changed!</div>`)
     })
+
+    test('inherited from ancestors', async () => {
+      const fooA = ref('FooA!')
+      const fooB = ref('FooB!')
+      const ProviderA = defineCustomElement({
+        provide: {
+          fooA
+        },
+        render() {
+          return h('provider-b')
+        }
+      })
+      const ProviderB = defineCustomElement({
+        provide: {
+          fooB
+        },
+        render() {
+          return h('my-multi-consumer')
+        }
+      })
+
+      const Consumer = defineCustomElement({
+        setup() {
+          const fooA = inject<Ref>('fooA')!
+          const fooB = inject<Ref>('fooB')!
+          return () => h('div', `${fooA.value} ${fooB.value}`)
+        }
+      })
+
+      customElements.define('provider-a', ProviderA)
+      customElements.define('provider-b', ProviderB)
+      customElements.define('my-multi-consumer', Consumer)
+      container.innerHTML = `<provider-a><provider-a>`
+      const providerA = container.childNodes[0] as VueElement
+      const providerB = providerA.shadowRoot!.childNodes[0] as VueElement
+      const consumer = providerB.shadowRoot!.childNodes[0] as VueElement
+
+      expect(consumer.shadowRoot!.innerHTML).toBe(`<div>FooA! FooB!</div>`)
+
+      fooA.value = 'changedA!'
+      fooB.value = 'changedB!'
+      await nextTick()
+      expect(consumer.shadowRoot!.innerHTML).toBe(
+        `<div>changedA! changedB!</div>`
+      )
+    })
   })
 
   describe('styles', () => {

packages/runtime-dom/src/apiCustomElement.ts

@@ -368,6 +368,7 @@ export class VueElement extends BaseClass {
         ) {
           if (parent instanceof VueElement) {
             instance.parent = parent._instance
+            instance.provides = parent._instance!.provides
             break
           }
         }