mirror of https://github.com/sveltejs/svelte
fix: `append_styles` in an effect to make them available on mount (#16509)
Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/16514/head
parent
1773df9484
commit
99452053af
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: `append_styles` in an effect to make them available on mount
|
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: always inject styles when compiling as a custom element
|
@ -0,0 +1,21 @@
|
||||
import { test } from '../../assert';
|
||||
const tick = () => Promise.resolve();
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
target.innerHTML = '<custom-element></custom-element>';
|
||||
/** @type {any} */
|
||||
const el = target.querySelector('custom-element');
|
||||
|
||||
/** @type {string} */
|
||||
let html = '';
|
||||
const handle_evt = (e) => (html = e.detail);
|
||||
el.addEventListener('html', handle_evt);
|
||||
|
||||
await tick();
|
||||
await tick();
|
||||
await tick();
|
||||
|
||||
assert.ok(html.includes('<style'));
|
||||
}
|
||||
});
|
@ -0,0 +1,16 @@
|
||||
<svelte:options css="injected" customElement="custom-element"/>
|
||||
|
||||
<script lang="ts">
|
||||
$effect(() => {
|
||||
$host().dispatchEvent(new CustomEvent("html", { detail: $host().shadowRoot?.innerHTML }));
|
||||
})
|
||||
</script>
|
||||
|
||||
<button class="btn">btn</button>
|
||||
|
||||
<style >
|
||||
.btn {
|
||||
width: 123px;
|
||||
height: 123px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,9 @@
|
||||
<svelte:options customElement={{ tag: 'my-thing' }} />
|
||||
|
||||
<h1>hello</h1>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,15 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client'],
|
||||
async test({ assert, target }) {
|
||||
const thing = /** @type HTMLElement & { object: { test: true }; } */ (
|
||||
target.querySelector('my-thing')
|
||||
);
|
||||
|
||||
await tick();
|
||||
|
||||
assert.include(thing.shadowRoot?.innerHTML, 'red');
|
||||
}
|
||||
});
|
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
import './Thing.svelte';
|
||||
</script>
|
||||
|
||||
<my-thing></my-thing>
|
Loading…
Reference in new issue