Skip to content

Commit aec2dfb

Browse files
edison1105edison1105
committed
wip: save
1 parent 6a3e771 commit aec2dfb

File tree

3 files changed

+247
-50
lines changed

3 files changed

+247
-50
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -966,7 +966,7 @@ function baseCreateRenderer(
966966
!isSameVNodeType(oldVNode, newVNode) ||
967967
// - In the case of a component, it could contain anything.
968968
oldVNode.shapeFlag & (ShapeFlags.COMPONENT | ShapeFlags.TELEPORT))
969-
? hostParentNode(oldVNode.el) || oldVNode.el._parentNode
969+
? hostParentNode(oldVNode.el) || oldVNode.el.$parentNode
970970
: // In other cases, the parent container is not actually used so we
971971
// just pass the block element here to avoid a DOM parentNode call.
972972
fallbackContainer

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

+203-25
Original file line numberDiff line numberDiff line change
@@ -1141,7 +1141,7 @@ describe('defineCustomElement', () => {
11411141
})
11421142

11431143
// #13206
1144-
test('update slotted v-if nodes w/ shadowRoot false', async () => {
1144+
test('update slotted v-if nodes w/ shadowRoot false (optimized mode)', async () => {
11451145
const E = defineCustomElement(
11461146
defineComponent({
11471147
props: {
@@ -1155,16 +1155,18 @@ describe('defineCustomElement', () => {
11551155
}),
11561156
{ shadowRoot: false },
11571157
)
1158-
customElements.define('ce-shadow-root-false', E)
1158+
customElements.define('ce-shadow-root-false-optimized', E)
11591159

11601160
const Comp = defineComponent({
11611161
props: {
11621162
isShown: { type: Boolean, required: true },
11631163
},
11641164
render() {
1165-
return h('ce-shadow-root-false', { 'is-shown': this.isShown }, [
1166-
renderSlot(this.$slots, 'default'),
1167-
])
1165+
return h(
1166+
'ce-shadow-root-false-optimized',
1167+
{ 'is-shown': this.isShown },
1168+
[renderSlot(this.$slots, 'default')],
1169+
)
11681170
},
11691171
})
11701172

@@ -1185,7 +1187,12 @@ describe('defineCustomElement', () => {
11851187
{ isShown: isShown.value },
11861188
{
11871189
default: withCtx(() => [
1188-
createElementVNode('div', null, isShown.value, 1 /* TEXT */),
1190+
createElementVNode(
1191+
'div',
1192+
null,
1193+
String(isShown.value),
1194+
1 /* TEXT */,
1195+
),
11891196
count.value > 1
11901197
? (openBlock(), createElementBlock('div', { key: 0 }, 'hi'))
11911198
: createCommentVNode('v-if', true),
@@ -1204,7 +1211,94 @@ describe('defineCustomElement', () => {
12041211
const app = createApp(App)
12051212
app.mount(container)
12061213
expect(container.innerHTML).toBe(
1207-
`<ce-shadow-root-false data-v-app=""><!--v-if--></ce-shadow-root-false>`,
1214+
`<ce-shadow-root-false-optimized data-v-app="">` +
1215+
`<div>false</div><!--v-if-->` +
1216+
`</ce-shadow-root-false-optimized>`,
1217+
)
1218+
1219+
click()
1220+
await nextTick()
1221+
expect(container.innerHTML).toBe(
1222+
`<ce-shadow-root-false-optimized data-v-app="" is-shown="">` +
1223+
`<div><div>true</div><!--v-if--></div>` +
1224+
`</ce-shadow-root-false-optimized>`,
1225+
)
1226+
1227+
click()
1228+
await nextTick()
1229+
expect(container.innerHTML).toBe(
1230+
`<ce-shadow-root-false-optimized data-v-app="">` +
1231+
`<div>false</div><!--v-if-->` +
1232+
`</ce-shadow-root-false-optimized>`,
1233+
)
1234+
1235+
click()
1236+
await nextTick()
1237+
expect(container.innerHTML).toBe(
1238+
`<ce-shadow-root-false-optimized data-v-app="" is-shown="">` +
1239+
`<div><div>true</div><div>hi</div></div>` +
1240+
`</ce-shadow-root-false-optimized>`,
1241+
)
1242+
})
1243+
1244+
test.todo('update slotted v-if nodes w/ shadowRoot false', async () => {
1245+
const E = defineCustomElement(
1246+
defineComponent({
1247+
props: {
1248+
isShown: { type: Boolean, required: true },
1249+
},
1250+
render() {
1251+
return this.isShown
1252+
? h('div', { key: 0 }, [renderSlot(this.$slots, 'default')])
1253+
: createCommentVNode('v-if')
1254+
},
1255+
}),
1256+
{ shadowRoot: false },
1257+
)
1258+
customElements.define('ce-shadow-root-false', E)
1259+
1260+
const Comp = defineComponent({
1261+
props: {
1262+
isShown: { type: Boolean, required: true },
1263+
},
1264+
render() {
1265+
return h('ce-shadow-root-false', { 'is-shown': this.isShown }, [
1266+
renderSlot(this.$slots, 'default'),
1267+
])
1268+
},
1269+
})
1270+
1271+
const isShown = ref(false)
1272+
const count = ref(0)
1273+
1274+
function click() {
1275+
isShown.value = !isShown.value
1276+
count.value++
1277+
}
1278+
1279+
const App = {
1280+
render() {
1281+
return h(
1282+
Comp,
1283+
{ isShown: isShown.value },
1284+
{
1285+
default: () => [
1286+
h('div', null, String(isShown.value)),
1287+
count.value > 1
1288+
? h('div', { key: 0 }, 'hi')
1289+
: createCommentVNode('v-if', true),
1290+
],
1291+
},
1292+
)
1293+
},
1294+
}
1295+
const container = document.createElement('div')
1296+
document.body.appendChild(container)
1297+
1298+
const app = createApp(App)
1299+
app.mount(container)
1300+
expect(container.innerHTML).toBe(
1301+
`<ce-shadow-root-false data-v-app=""><div>false</div><!--v-if--></ce-shadow-root-false>`,
12081302
)
12091303

12101304
click()
@@ -1216,7 +1310,7 @@ describe('defineCustomElement', () => {
12161310
click()
12171311
await nextTick()
12181312
expect(container.innerHTML).toBe(
1219-
`<ce-shadow-root-false data-v-app=""><!--v-if--></ce-shadow-root-false>`,
1313+
`<ce-shadow-root-false data-v-app=""><div>false</div><!--v-if--></ce-shadow-root-false>`,
12201314
)
12211315

12221316
click()
@@ -1227,7 +1321,7 @@ describe('defineCustomElement', () => {
12271321
})
12281322

12291323
// #13234
1230-
test('switch between slotted and fallback nodes w/ shadowRoot false', async () => {
1324+
test('switch between slotted and fallback nodes w/ shadowRoot false (optimized mode)', async () => {
12311325
const E = defineCustomElement(
12321326
defineComponent({
12331327
render() {
@@ -1238,21 +1332,25 @@ describe('defineCustomElement', () => {
12381332
}),
12391333
{ shadowRoot: false },
12401334
)
1241-
customElements.define('ce-with-fallback-shadow-root-false', E)
1335+
customElements.define('ce-with-fallback-shadow-root-false-optimized', E)
12421336

12431337
const Comp = defineComponent({
12441338
render() {
12451339
return (
12461340
openBlock(),
1247-
createElementBlock('ce-with-fallback-shadow-root-false', null, [
1248-
this.$slots.foo
1249-
? (openBlock(),
1250-
createElementBlock('div', { key: 0, slot: 'foo' }, [
1251-
renderSlot(this.$slots, 'foo'),
1252-
]))
1253-
: createCommentVNode('v-if', true),
1254-
renderSlot(this.$slots, 'default'),
1255-
])
1341+
createElementBlock(
1342+
'ce-with-fallback-shadow-root-false-optimized',
1343+
null,
1344+
[
1345+
this.$slots.foo
1346+
? (openBlock(),
1347+
createElementBlock('div', { key: 0, slot: 'foo' }, [
1348+
renderSlot(this.$slots, 'foo'),
1349+
]))
1350+
: createCommentVNode('v-if', true),
1351+
renderSlot(this.$slots, 'default'),
1352+
],
1353+
)
12561354
)
12571355
},
12581356
})
@@ -1290,27 +1388,107 @@ describe('defineCustomElement', () => {
12901388
const app = createApp(App)
12911389
app.mount(container)
12921390
expect(container.innerHTML).toBe(
1293-
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1391+
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
12941392
`fallback` +
1295-
`</ce-with-fallback-shadow-root-false>`,
1393+
`</ce-with-fallback-shadow-root-false-optimized>`,
12961394
)
12971395

12981396
isShown.value = true
12991397
await nextTick()
13001398
expect(container.innerHTML).toBe(
1301-
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1399+
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
13021400
`<div slot="foo">foo</div>` +
1303-
`</ce-with-fallback-shadow-root-false>`,
1401+
`</ce-with-fallback-shadow-root-false-optimized>`,
13041402
)
13051403

13061404
isShown.value = false
13071405
await nextTick()
13081406
expect(container.innerHTML).toBe(
1309-
`<ce-with-fallback-shadow-root-false data-v-app="">` +
1407+
`<ce-with-fallback-shadow-root-false-optimized data-v-app="">` +
13101408
`fallback<!--v-if-->` +
1311-
`</ce-with-fallback-shadow-root-false>`,
1409+
`</ce-with-fallback-shadow-root-false-optimized>`,
13121410
)
13131411
})
1412+
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({
1429+
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'),
1437+
])
1438+
},
1439+
})
1440+
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+
})
1463+
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+
)
13141492
})
13151493

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

0 commit comments

Comments
 (0)