Skip to content

Commit 03d3ea3

Browse files
edison1105edison1105
committed
wip: save
1 parent aec2dfb commit 03d3ea3

File tree

3 files changed

+93
-87
lines changed

3 files changed

+93
-87
lines changed

‎packages/runtime-core/src/renderer.ts

+12
Original file line numberDiff line numberDiff line change
@@ -711,6 +711,18 @@ function baseCreateRenderer(
711711
if (needCallTransitionHooks) {
712712
transition!.beforeEnter(el)
713713
}
714+
715+
// For custom element with shadowRoot: false, the anchor node may be moved
716+
// to the slot container. In this case, it need to use the anchor's parent
717+
// node as the actual container.
718+
if (
719+
container._isVueCE &&
720+
container._def.shadowRoot === false &&
721+
anchor &&
722+
anchor.$parentNode
723+
) {
724+
container = anchor.$parentNode
725+
}
714726
hostInsert(el, container, anchor)
715727
if (
716728
(vnodeHook = props && props.onVnodeMounted) ||

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

+80-83
Original file line numberDiff line numberDiff line change
@@ -1212,7 +1212,7 @@ describe('defineCustomElement', () => {
12121212
app.mount(container)
12131213
expect(container.innerHTML).toBe(
12141214
`<ce-shadow-root-false-optimized data-v-app="">` +
1215-
`<div>false</div><!--v-if-->` +
1215+
`<div>false</div><!--v-if--><!--v-if-->` +
12161216
`</ce-shadow-root-false-optimized>`,
12171217
)
12181218

@@ -1228,20 +1228,20 @@ describe('defineCustomElement', () => {
12281228
await nextTick()
12291229
expect(container.innerHTML).toBe(
12301230
`<ce-shadow-root-false-optimized data-v-app="">` +
1231-
`<div>false</div><!--v-if-->` +
1231+
`<div>false</div><!--v-if--><!--v-if-->` +
12321232
`</ce-shadow-root-false-optimized>`,
12331233
)
12341234

12351235
click()
12361236
await nextTick()
12371237
expect(container.innerHTML).toBe(
12381238
`<ce-shadow-root-false-optimized data-v-app="" is-shown="">` +
1239-
`<div><div>true</div><div>hi</div></div>` +
1239+
`<!--v-if--><div><div>true</div><div>hi</div></div>` +
12401240
`</ce-shadow-root-false-optimized>`,
12411241
)
12421242
})
12431243

1244-
test.todo('update slotted v-if nodes w/ shadowRoot false', async () => {
1244+
test('update slotted v-if nodes w/ shadowRoot false', async () => {
12451245
const E = defineCustomElement(
12461246
defineComponent({
12471247
props: {
@@ -1298,7 +1298,7 @@ describe('defineCustomElement', () => {
12981298
const app = createApp(App)
12991299
app.mount(container)
13001300
expect(container.innerHTML).toBe(
1301-
`<ce-shadow-root-false data-v-app=""><div>false</div><!--v-if--></ce-shadow-root-false>`,
1301+
`<ce-shadow-root-false data-v-app=""><div>false</div><!--v-if--><!--v-if--></ce-shadow-root-false>`,
13021302
)
13031303

13041304
click()
@@ -1310,13 +1310,13 @@ describe('defineCustomElement', () => {
13101310
click()
13111311
await nextTick()
13121312
expect(container.innerHTML).toBe(
1313-
`<ce-shadow-root-false data-v-app=""><div>false</div><!--v-if--></ce-shadow-root-false>`,
1313+
`<ce-shadow-root-false data-v-app=""><div>false</div><!--v-if--><!--v-if--></ce-shadow-root-false>`,
13141314
)
13151315

13161316
click()
13171317
await nextTick()
13181318
expect(container.innerHTML).toBe(
1319-
`<ce-shadow-root-false data-v-app="" is-shown=""><div><div>true</div><div>hi</div></div></ce-shadow-root-false>`,
1319+
`<ce-shadow-root-false data-v-app="" is-shown=""><!--v-if--><div><div>true</div><div>hi</div></div></ce-shadow-root-false>`,
13201320
)
13211321
})
13221322

@@ -1389,7 +1389,7 @@ describe('defineCustomElement', () => {
13891389
app.mount(container)
13901390
expect(container.innerHTML).toBe(
13911391
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
1392-
`fallback` +
1392+
`<!--v-if-->fallback` +
13931393
`</ce-with-fallback-shadow-root-false-optimized>`,
13941394
)
13951395

@@ -1405,90 +1405,87 @@ describe('defineCustomElement', () => {
14051405
await nextTick()
14061406
expect(container.innerHTML).toBe(
14071407
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
1408-
`fallback<!--v-if-->` +
1408+
`<!--v-if-->fallback` +
14091409
`</ce-with-fallback-shadow-root-false-optimized>`,
14101410
)
14111411
})
14121412

1413-
test.todo(
1414-
'switch between slotted and fallback nodes w/ shadowRoot false',
1415-
async () => {
1416-
const E = defineCustomElement(
1417-
defineComponent({
1418-
render() {
1419-
return renderSlot(this.$slots, 'foo', {}, () => [
1420-
createTextVNode('fallback'),
1421-
])
1422-
},
1423-
}),
1424-
{ shadowRoot: false },
1425-
)
1426-
customElements.define('ce-with-fallback-shadow-root-false', E)
1427-
1428-
const Comp = defineComponent({
1413+
test('switch between slotted and fallback nodes w/ shadowRoot false', async () => {
1414+
const E = defineCustomElement(
1415+
defineComponent({
14291416
render() {
1430-
return h('ce-with-fallback-shadow-root-false', null, [
1431-
this.$slots.foo
1432-
? h('div', { key: 0, slot: 'foo' }, [
1433-
renderSlot(this.$slots, 'foo'),
1434-
])
1435-
: createCommentVNode('v-if', true),
1436-
renderSlot(this.$slots, 'default'),
1417+
return renderSlot(this.$slots, 'foo', {}, () => [
1418+
createTextVNode('fallback'),
14371419
])
14381420
},
1439-
})
1421+
}),
1422+
{ shadowRoot: false },
1423+
)
1424+
customElements.define('ce-with-fallback-shadow-root-false', E)
14401425

1441-
const isShown = ref(false)
1442-
const App = defineComponent({
1443-
components: { Comp },
1444-
render() {
1445-
return h(
1446-
Comp,
1447-
null,
1448-
createSlots(
1449-
{ _: 2 /* DYNAMIC */ } as any,
1450-
[
1451-
isShown.value
1452-
? {
1453-
name: 'foo',
1454-
fn: withCtx(() => [createTextVNode('foo')]),
1455-
key: '0',
1456-
}
1457-
: undefined,
1458-
] as any,
1459-
),
1460-
)
1461-
},
1462-
})
1426+
const Comp = defineComponent({
1427+
render() {
1428+
return h('ce-with-fallback-shadow-root-false', null, [
1429+
this.$slots.foo
1430+
? h('div', { key: 0, slot: 'foo' }, [
1431+
renderSlot(this.$slots, 'foo'),
1432+
])
1433+
: createCommentVNode('v-if', true),
1434+
renderSlot(this.$slots, 'default'),
1435+
])
1436+
},
1437+
})
14631438

1464-
const container = document.createElement('div')
1465-
document.body.appendChild(container)
1466-
1467-
const app = createApp(App)
1468-
app.mount(container)
1469-
expect(container.innerHTML).toBe(
1470-
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1471-
`fallback` +
1472-
`</ce-with-fallback-shadow-root-false>`,
1473-
)
1474-
1475-
isShown.value = true
1476-
await nextTick()
1477-
expect(container.innerHTML).toBe(
1478-
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1479-
`<div slot="foo">foo</div>` +
1480-
`</ce-with-fallback-shadow-root-false>`,
1481-
)
1482-
1483-
isShown.value = false
1484-
await nextTick()
1485-
expect(container.innerHTML).toBe(
1486-
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1487-
`fallback<!--v-if-->` +
1488-
`</ce-with-fallback-shadow-root-false>`,
1489-
)
1490-
},
1491-
)
1439+
const isShown = ref(false)
1440+
const App = defineComponent({
1441+
components: { Comp },
1442+
render() {
1443+
return h(
1444+
Comp,
1445+
null,
1446+
createSlots(
1447+
{ _: 2 /* DYNAMIC */ } as any,
1448+
[
1449+
isShown.value
1450+
? {
1451+
name: 'foo',
1452+
fn: withCtx(() => [createTextVNode('foo')]),
1453+
key: '0',
1454+
}
1455+
: undefined,
1456+
] as any,
1457+
),
1458+
)
1459+
},
1460+
})
1461+
1462+
const container = document.createElement('div')
1463+
document.body.appendChild(container)
1464+
1465+
const app = createApp(App)
1466+
app.mount(container)
1467+
expect(container.innerHTML).toBe(
1468+
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1469+
`<!--v-if-->fallback` +
1470+
`</ce-with-fallback-shadow-root-false>`,
1471+
)
1472+
1473+
isShown.value = true
1474+
await nextTick()
1475+
expect(container.innerHTML).toBe(
1476+
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1477+
`<div slot="foo">foo</div>` +
1478+
`</ce-with-fallback-shadow-root-false>`,
1479+
)
1480+
1481+
isShown.value = false
1482+
await nextTick()
1483+
expect(container.innerHTML).toBe(
1484+
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1485+
`<!--v-if-->fallback` +
1486+
`</ce-with-fallback-shadow-root-false>`,
1487+
)
1488+
})
14921489
})
14931490

14941491
describe('helpers', () => {

‎packages/runtime-dom/src/apiCustomElement.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -679,10 +679,6 @@ export class VueElement
679679
if (!processedSlots.has('default')) {
680680
let content = this._slots!['default']
681681
if (content) {
682-
// TODO
683-
content = content.filter(
684-
n => !(n.nodeType === 8 && (n as Comment).data === 'v-if'),
685-
)
686682
insertSlottedContent(content, scopeId, this, this.firstChild)
687683
}
688684
}
@@ -830,6 +826,7 @@ function insertSlottedContent(
830826
;(child as Element).setAttribute(id, '')
831827
}
832828
}
829+
;(n as any).$parentNode = parent
833830
parent.insertBefore(n, anchor)
834831
}
835832
}

0 commit comments

Comments
 (0)