Skip to content
Permalink
Browse files
fix(custom-elements): ensure custom elements can inherit provides fro…
…m ancestors (#5098)

fix #5096
  • Loading branch information
LinusBorg committed Nov 11, 2022
1 parent 4798a9f commit 192dcb648c0630ac20d2009eed512e142a72654a
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 0 deletions.
@@ -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', () => {
@@ -368,6 +368,7 @@ export class VueElement extends BaseClass {
) {
if (parent instanceof VueElement) {
instance.parent = parent._instance
instance.provides = parent._instance!.provides
break
}
}

0 comments on commit 192dcb6

Please sign in to comment.