8000 fix(custom-element): enhance slot handling with `shadowRoot:false` by edison1105 · Pull Request #13208 · vuejs/core · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

fix(custom-element): enhance slot handling with shadowRoot:false #13208

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

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
+344 −11
Open

fix(custom-element): enhance slot handling with shadowRoot:false #13208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8e5a438
fix(custom-element): update slot nodes when shadowRoot is false
edison1105 Apr 16, 2025
68b2001
wip: update
edison1105 Apr 16, 2025
1a5ea55
test: add tests
edison1105 Apr 16, 2025
9f51f13
wip: save
edison1105 May 8, 2025
6a3e771
test: add test
edison1105 May 8, 2025
aec2dfb
wip: save
edison1105 May 9, 2025
2d7e5af
wip: save
edison1105 May 10, 2025
01684ca
chore: update
edison1105 May 12, 2025
3e72409
chore: remove the code related to handling full diff
edison1105 May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/runtime-core/src/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -934,6 +934,10 @@ function baseCreateRenderer(
dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated')
}, parentSuspense)
}

if (el._isVueCE && el._def.shadowRoot === false) {
el._updateSlots(n1, n2)
}
}

// The fast path for blocks.
Expand Down Expand Up @@ -962,7 +966,7 @@ function baseCreateRenderer(
!isSameVNodeType(oldVNode, newVNode) ||
// - In the case of a component, it could contain anything.
oldVNode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.TELEPORT))
? hostParentNode(oldVNode.el)!
? hostParentNode(oldVNode.el) || oldVNode.el.$parentNode
: // In other cases, the parent container is not actually used so we
// just pass the block element here to avoid a DOM parentNode call.
fallbackContainer
Expand Down
199 changes: 199 additions & 0 deletions packages/runtime-dom/__tests__/customElement.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,27 @@ import {
Teleport,
type VueElement,
createApp,
createBlock,
createCommentVNode,
createElementBlock,
createElementVNode,
createSlots,
createTextVNode,
defineAsyncComponent,
defineComponent,
defineCustomElement,
h,
inject,
nextTick,
onMounted,
openBlock,
provide,
ref,
render,
renderSlot,
useHost,
useShadowRoot,
withCtx,
} from '../src'

declare var __VUE_HMR_RUNTIME__: HMRRuntime
Expand Down Expand Up @@ -1131,6 +1139,197 @@ describe('defineCustomElement', () => {
expect(target.innerHTML).toBe(`<span>default</span>`)
app.unmount()
})

// #13206
test('update slotted v-if nodes w/ shadowRoot false (optimized mode)', async () => {
const E = defineCustomElement(
defineComponent({
props: {
isShown: { type: Boolean, required: true },
},
render() {
return this.isShown
? h('div', { key: 0 }, [renderSlot(this.$slots, 'default')])
: createCommentVNode('v-if')
},
}),
{ shadowRoot: false },
)
customElements.define('ce-shadow-root-false-optimized', E)

const Comp = defineComponent({
props: {
isShown: { type: Boolean, required: true },
},
render() {
return h(
'ce-shadow-root-false-optimized',
{ 'is-shown': this.isShown },
[renderSlot(this.$slots, 'default')],
)
},
})

const isShown = ref(false)
const count = ref(0)

function click() {
isShown.value = !isShown.value
count.value++
}

const App = {
render() {
return (
openBlock(),
createBlock(
Comp,
{ isShown: isShown.value },
{
default: withCtx(() => [
createElementVNode(
'div',
null,
String(isShown.value),
1 /* TEXT */,
),
count.value > 1
? (openBlock(), createElementBlock('div', { key: 0 }, 'hi'))
: createCommentVNode('v-if', true),
]),
_: 1 /* STABLE */,
},
8 /* PROPS */,
['isShown'],
)
)
},
}
const container = document.createElement('div')
document.body.appendChild(container)

const app = createApp(App)
app.mount(container)
expect(container.innerHTML).toBe(
`<ce-shadow-root-false-optimized data-v-app="">` +
`<!--v-if-->` +
`</ce-shadow-root-false-optimized>`,
)

click()
await nextTick()
expect(container.innerHTML).toBe(
`<ce-shadow-root-false-optimized data-v-app="" is-shown="">` +
`<div><div>true</div><!--v-if--></div>` +
`</ce-shadow-root-false-optimized>`,
)

click()
await nextTick()
expect(container.innerHTML).toBe(
`<ce-shadow-root-false-optimized data-v-app="">` +
`<!--v-if-->` +
`</ce-shadow-root-false-optimized>`,
)

click()
await nextTick()
expect(container.innerHTML).toBe(
`<ce-shadow-root-false-optimized data-v-app="" is-shown="">` +
`<div><div>true</div><div>hi</div></div>` +
`</ce-shadow-root-false-optimized>`,
)
})

// #13234
test('switch between slotted and fallback nodes w/ shadowRoot false (optimized mode)', async () => {
const E = defineCustomElement(
defineComponent({
render() {
return renderSlot(this.$slots, 'foo', {}, () => [
createTextVNode('fallback'),
])
},
}),
{ shadowRoot: false },
)
customElements.define('ce-with-fallback-shadow-root-false-optimized', E)

const Comp = defineComponent({
render() {
return (
openBlock(),
createElementBlock(
'ce-with-fallback-shadow-root-false-optimized',
null,
[
this.$slots.foo
? (openBlock(),
createElementBlock('div', { key: 0, slot: 'foo' }, [
renderSlot(this.$slots, 'foo'),
]))
: createCommentVNode('v-if', true),
renderSlot(this.$slots, 'default'),
],
)
)
},
})

const isShown = ref(false)
const App = defineComponent({
components: { Comp },
render() {
return (
openBlock(),
createBlock(
Comp,
null,
createSlots(
{ _: 2 /* DYNAMIC */ } as any,
[
isShown.value
? {
name: 'foo',
fn: withCtx(() => [createTextVNode('foo')]),
key: '0',
}
: undefined,
] as any,
),
1024 /* DYNAMIC_SLOTS */,
)
)
},
})

const container = document.createElement('div')
document.body.appendChild(container)

const app = createApp(App)
app.mount(container)
expect(container.innerHTML).toBe(
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
`fallback` +
`</ce-with-fallback-shadow-root-false-optimized>`,
)

isShown.value = true
await nextTick()
expect(container.innerHTML).toBe(
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
`<div slot="foo">foo</div>` +
`</ce-with-fallback-shadow-root-false-optimized>`,
)

isShown.value = false
await nextTick()
expect(container.innerHTML).toBe(
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
`fallback<!--v-if-->` +
`</ce-with-fallback-shadow-root-false-optimized>`,
)
})
})

describe('helpers', () => {
Expand Down
Loading
0