mirror of https://github.com/sveltejs/svelte
[fix] no root node for detached dom node (#6570)
parent
a3fb765d6f
commit
1952ea22de
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let name = 'World';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>Hello {name}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
compileOptions: {
|
||||||
|
cssHash: () => 'svelte-xyz'
|
||||||
|
},
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
assert.htmlEqual(
|
||||||
|
window.document.head.innerHTML,
|
||||||
|
'<style id="svelte-xyz">div.svelte-xyz{color:red}</style>'
|
||||||
|
);
|
||||||
|
assert.htmlEqual(
|
||||||
|
component.div.innerHTML,
|
||||||
|
'<div class="svelte-xyz">Hello World</div>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
export let div;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
div = document.createElement('div');
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: div
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
app.$destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let name = 'World';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>Hello {name}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,16 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
compileOptions: {
|
||||||
|
cssHash: () => 'svelte-xyz'
|
||||||
|
},
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
assert.htmlEqual(
|
||||||
|
window.document.head.innerHTML,
|
||||||
|
'<style id="svelte-xyz">div.svelte-xyz{color:red}</style>'
|
||||||
|
);
|
||||||
|
assert.htmlEqual(
|
||||||
|
component.div.innerHTML,
|
||||||
|
'<div class="svelte-xyz">Hello World</div>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,18 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
export let div;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const app = new App({
|
||||||
|
target: div
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
app.$destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={div} />
|
@ -0,0 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let name = 'World';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>Hello {name}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,13 @@
|
|||||||
|
export default {
|
||||||
|
skip_if_ssr: true,
|
||||||
|
compileOptions: {
|
||||||
|
cssHash: () => 'svelte-xyz'
|
||||||
|
},
|
||||||
|
async test({ assert, component, target, window }) {
|
||||||
|
assert.htmlEqual(window.document.head.innerHTML, '');
|
||||||
|
assert.htmlEqual(component.div.shadowRoot.innerHTML, `
|
||||||
|
<style id="svelte-xyz">div.svelte-xyz{color:red}</style>
|
||||||
|
<div class="svelte-xyz">Hello World</div>
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
};
|
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
import App from './App.svelte';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
export let div;
|
||||||
|
onMount(() => {
|
||||||
|
const root = div.attachShadow({ mode: 'open' });
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: root
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
app.$destroy();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={div} />
|
Loading…
Reference in new issue