Get reference to root element of component in Svelte

user_289246 0
Viewed 2857

I know I can get a reference to a DOM element by using bind:this:

<script>
  import { onMount } from "svelte";

  let root;

  onMount(() => {
    // root is div
  });
</script>

<div bind:this="{root}">
  content
</div>

How can I get a reference to the DOM node of a root element of a component?

Wrapper.svelte:
<div class="root">
  <slot />
</div>

App.svelte:
<script>
  import { onMount } from "svelte";

  let root;

  onMount(() => {
    // root is not div :(
  });
</script>

<Wrapper bind:this="{root}">
  content
</Wrapper>
svelte-component svelte javascript
2 Answers

Svelte doesn't enforce a root component.

<p>I am valid component.</p>
<p>With multiple roots.<p>

<script>
  console.log('No root is valid too')
</script>

So there's not shortcut syntax to grab the root element, you need to manually "proxy" the element you want to expose:

Wrapper.svelte

<script>
  export let root
</script>

<div bind:this={root}>...</div>

App.svelte

<script>
  import Wrapper from './Wrapper.svelte'
  let el
</script>

<Wrapper bind:root={el} />

With a little exotic JS syntax, you can also replicate the bind:this syntax if you please:

Wrapper.svelte

<script>
  let root
  export { root as this }
</script>

<div bind:this={root} />

App.svelte

<script>
  import Wrapper from './Wrapper.svelte'
  let root
</script>

<Wrapper bind:this={root} />
user_13875190

Inspecting the DOM using the browsers devtools I recognized that a Svelte-Component created with npx degit sveltejs/template my-svelte-project renders inside its <main></main> tag.

This means, in your case:

let element = document.querySelector('div.root')

should do the job. Otherwise you can put a <main></main> tag surround your components html and request for document.querySelector('main'). This can be used with any css-selector.

user_79124160
Related