8000 fix(custom-element): enhance slot handling with `shadowRoot:false` by edison1105 · Pull Request #13208 · vuejs/core · GitHub
[go: up one dir, main page]
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
Open

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

Show file tre 8000 e
Hide file tree
Changes from 1 commit
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
Prev Previous commit
Next Next commit
wip: save
  • Loading branch information
@edison1105
edison1105 committed May 9, 2025
commit aec2dfb59d4f5d0cfb7f9e74cb52d199f27499d6
2 changes: 1 addition & 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 @@ -966,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) || oldVNode.el._parentNode
? 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
228 changes: 203 additions & 25 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 @@ -1141,7 +1141,7 @@ describe('defineCustomElement', () => {
})

// #13206
test('update slotted v-if nodes w/ shadowRoot false', async () => {
test('update slotted v-if nodes w/ shadowRoot false (optimized mode)', async () => {
const E = defineCustomElement(
defineComponent({
props: {
Expand All @@ -1155,16 +1155,18 @@ describe('defineCustomElement', () => {
}),
{ shadowRoot: false },
)
customElements.define('ce-shadow-root-false', E)
customElements.define('ce-shadow-root-false-optimized', E)

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

Expand All @@ -1185,7 +1187,12 @@ describe('defineCustomElement', () => {
{ isShown: isShown.value },
{
default: withCtx(() => [
createElementVNode('div', null, isShown.value, 1 /* TEXT */),
createElementVNode(
'div',
null,
String(isShown.value),
1 /* TEXT */,
),
count.value > 1
? (openBlock(), createElementBlock('div', { key: 0 }, 'hi'))
: createCommentVNode('v-if', true),
Expand All @@ -1204,7 +1211,94 @@ describe('defineCustomElement', () => {
const app = createApp(App)
app.mount(container)
expect(container.innerHTML).toBe(
`<ce-shadow-root-false data-v-app=""><!--v-if--></ce-shadow-root-false>`,
`<ce-shadow-root-false-optimized data-v-app="">` +
`<div>false</div><!--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="">` +
`<div>false</div><!--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>`,
)
})

test.todo('update slotted v-if nodes w/ shadowRoot false', 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', E)

const Comp = defineComponent({
props: {
isShown: { type: Boolean, required: true },
},
render() {
return h('ce-shadow-root-false', { '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 h(
Comp,
{ isShown: isShown.value },
{
default: () => [
h('div', null, String(isShown.value)),
count.value > 1
? h('div', { key: 0 }, 'hi')
: createCommentVNode('v-if', true),
],
},
)
},
}
const container = document.createElement('div')
document.body.appendChild(container)

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

click()
Expand All @@ -1216,7 +1310,7 @@ describe('defineCustomElement', () => {
click()
await nextTick()
expect(container.innerHTML).toBe(
`<ce-shadow-root-false data-v-app=""><!--v-if--></ce-shadow-root-false>`,
`<ce-shadow-root-false data-v-app=""><div>false</div><!--v-if--></ce-shadow-root-false>`,
)

click()
Expand All @@ -1227,7 +1321,7 @@ describe('defineCustomElement', () => {
})

// #13234
test('switch between slotted and fallback nodes w/ shadowRoot false', async () => {
test('switch between slotted and fallback nodes w/ shadowRoot false (optimized mode)', async () => {
const E = defineCustomElement(
defineComponent({
render() {
Expand All @@ -1238,21 +1332,25 @@ describe('defineCustomElement', () => {
}),
{ shadowRoot: false },
)
customElements.define('ce-with-fallback-shadow-root-false', E)
customElements.define('ce-with-fallback-shadow-root-false-optimized', E)

const Comp = defineComponent({
render() {
return (
openBlock(),
createElementBlock('ce-with-fallback-shadow-root-false', null, [
this.$slots.foo
? (openBlock(),
createElementBlock('div', { key: 0, slot: 'foo' }, [
renderSlot(this.$slots, 'foo'),
]))
: createCommentVNode('v-if', true),
renderSlot(this.$slots, 'default'),
])
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'),
],
)
)
},
})
Expand Down Expand Up @@ -1290,27 +1388,107 @@ describe('defineCustomElement', () => {
const app = createApp(App)
app.mount(container)
expect(container.innerHTML).toBe(
`<ce-with-fallback-shadow-root-false data-v-app="">` +
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
`fallback` +
`</ce-with-fallback-shadow-root-false>`,
`</ce-with-fallback-shadow-root-false-optimized>`,
)

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

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

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

const Comp = defineComponent({
render() {
return h('ce-with-fallback-shadow-root-false', null, [
this.$slots.foo
? h('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 h(
Comp,
null,
createSlots(
{ _: 2 /* DYNAMIC */ } as any,
[
isShown.value
? {
name: 'foo',
fn: withCtx(() => [createTextVNode('foo')]),
key: '0',
}
: undefined,
] as any,
),
)
},
})

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 data-v-app="">` +
`fallback` +
`</ce-with-fallback-shadow-root-false>`,
)

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

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

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