Should be possible to pass refs into helper functions

[ccampbell]

I tried to find an existing ticket for this, but I couldn’t. I think someone might have brought it up on the gitter chat at some point.

I am looking for a way to reference an element directly in a helper function. This is a somewhat crude example of what I am looking for:

https://svelte.technology/repl?version=1.18.2&gist=0ae4439ea03245395f61c94a1b67cefd

If there is already a way to do feel free to close this ticket.

---

My use case is I have a dynamic tooltip-like component that I want to dynamically position, but I want to offset the left position by half of the width of the element (the width is dynamic). I can pretty easily achieve this using window.getComputedStyle(document.querySelector('.tooltip')) or something like that, but would be nice to be able to reference the element directly.

[antony]

I too am experiencing the exact same thing - I want to reference the scoped element, because my chart library requires me to pass in a css selector to its constructor - and when I have multiple instances on a page, I want to address the correct one.

[Rich-Harris]

The problem with this is that the expression wouldn't be reactive — Svelte has no way of knowing when the properties of the element change, so if the size of the element were to change (as a result of the content changing, or fonts loading, or something else) then the offset would be incorrect.

If you were confident that the size of the element wasn't going to change after initial render, then this might be a good use case for decorators: #469

But there's actually a much simpler way to solve this using CSS:

<style>
  .tooltip {
    display: inline-block; /* otherwise the width for block-level elements is 100% */
    transform: translate(-50%,0); /* 50% is relative to the element, not the container */
  }
</style>

REPL.

[Rich-Harris]

@antony If you're using a chart library, it sounds like you might be better off using a component and instantiating the library inside oncreate?

[ccampbell]

@Rich-Harris thanks. It wouldn’t matter in my case, if the size changed cause the helper function is called on every render afaik (so the computed style would have a new width), but yeah, your recommendation is a much better solution. 😄

[antony]

@Rich-Harris forgot to reply to this, but yes, this was absolutely the solution!

[Conduitry]

I think this can be closed, we can re-open if someone disagrees.