$host() styles not synchronously available in onMount and $effect #16472
Description
Describe the bug
Component styles are not synchronously available when using the $host() rune within onMount.
This prevents reliable access to computed styles, dimensions or CSS variables of the host element immediately after it's mounted.
This bug occurs in Svelte versions 5.36.0 through 5.36.13.
Svelte 5.35.7 it behaves as expected.
Reproduction
- Use svelte version 5.36.0 - 5.36.13.
- Create a custom element
- access $host() within onMount.
<svelte:options customElement={{tag: "my-counter"}}/>
<script lang="ts">
import {onMount} from "svelte";
let Host = $host()
$effect(() => {
console.log("$effect", Host.shadowRoot?.innerHTML); // BUG: has no <style> tag
})
onMount(() => {
console.log("onMount",Host.shadowRoot?.innerHTML); // BUG: has no <style> tag
setTimeout(() => {
console.log("delayed",Host.shadowRoot?.innerHTML); // has the <style> tag
})
})
</script>
<button class="btn">Counter</button>
<style >
.btn {
width: 123px;
height: 123px;
}
</style>
Logs
System Info
System:
OS: macOS 15.5
CPU: (12) arm64 Apple M3 Pro
Memory: 94.95 MB / 36.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 24.3.0 - ~/.nvm/versions/node/v24.3.0/bin/node
npm: 11.4.2 - ~/.nvm/versions/node/v24.3.0/bin/npm
pnpm: 10.13.1 - ~/.nvm/versions/node/v24.3.0/bin/pnpm
Browsers:
Chrome: 138.0.7204.158
Edge: 138.0.3351.95
Safari: 18.5
npmPackages:
svelte: ^5.36.13 => 5.36.13Severity
annoyance