10

Say I render the following Dialog:

let dialog;

<MyDialog bind:this={dialog}/>

I want to position this dialog (using afterUpdate lifecycle function I guess). However, dialog is not a dom element. When I log it, it will look something like:

MyDialog {$$: {…}, left: 785, $set: ƒ, $capture_state: ƒ, $inject_state: ƒ}
$$: {fragment: {…}, ctx: Array(1), props: {…}, update: ƒ, not_equal: ƒ, …}
$capture_state: () => {…}
$inject_state: $$props => {…}
$set: $$props => {…}
someExportedProp: (...)
__proto__: SvelteComponentDev

How can I access its dom in order to position it?

1 Answer 1

26

MyDialog is not a DOM element, it is a Svelte component. And so, it's what you get when you bind:this on it: a Svelte component.

You only get a DOM element when binding to an actual element:

<div bind:this={el} />

If you need access to the DOM of MyDialog from its consumer (parent) component, you need to proxy it from the MyDialog component.

MyDialog.svelte

<script>
  export let el
</script>

<div class="dialog" bind:this={el}>
  <slot />
</div>

App.svelte

<script>
  import MyDialog from './MyDialog.svelte'

  let dialog

  $: console.log(dialog) // here, DOM element!
</script>

<MyDialog bind:el={dialog}>
  Hello!
</MyDialog>

That being said, I would think twice before leaking DOM elements outside of component. It kinda breaks encapsulation, which often ends up complicating your life... Maybe you can think of a better solution to control your dialog position without giving direct access to the innards of the component to the consumer?

EDIT

To move with props...

Props are "reactive", their value is automatically reflected in the DOM by the framework, so you don't need to run a function to move things. You can just declare what you want. This is the preferred style with these declarative frameworks.

<script>
  export let top
  export let left

  $: style = `top: ${top}px; left: ${left}px`
</script>

<div class="dialog" {style}>
  <slot />
</div>

If you need too, you can still run some code when props change (imperatively) with reactive blocks:

<script>
  export let top
  export let left

  let el

  // reactive block will rerun each time el, top, or left changes
  $: if (el) {
    el.style.top = top + 'px'
    el.style.left = left + 'px'
  }
</script>

<div class="dialog" bind:this={el}>
  <slot />
</div>
6
  • Thank you. Could you give me an example of a better solution? Maybe export a function then instead of the dom node? Commented Jun 9, 2020 at 15:22
  • 1
    Depends on what you really want to do when you say "position", but I think what I would do would probably be to have something like a position prop on the MyDialog component, and apply the effect to the DOM element from there, from the inside. This way, if the DOM / CSS of your dialog component evolves, you only have a single centralized place that you need to adapt.
    – rixo
    Commented Jun 9, 2020 at 16:06
  • How do I move the dialog (e.g. with dom top/left style attributes) by changing a props that would be exported? I see with an exported function, where I can give it some coordinates and I execute Dom operations to position the dialog; but I don't see how with your idea of exporting just one prop. How do you execute the Dom operations when that prop changes? Commented Jun 9, 2020 at 16:57
  • 2
    One prop can be an object, an array... It was just an example, the point was that it's often desirable to abstract the inside of a component behind a limited API, instead of exposing whole bits of it, and then you're stuck when you want to change those bits... I've added some examples of how I would move an element with props.
    – rixo
    Commented Jun 9, 2020 at 23:45
  • 2
    Man I just wanted to take a few seconds of your time if you had any, but you write me a whole edit. You're an awesome human:) thank you! Commented Jun 10, 2020 at 3:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.