$$host (or some way to access custom element instance)

[Rich-Harris]

From this Stack Overflow question — it might be nice if there was a way to get a reference to the host element, when compiling to custom elements (i.e. the <my-thing> for tag="my-thing").

Following the precedent set by $$props, we could add a $$host value. The main question is what should happen when not compiling as a custom element — error? or reference to the instance (which we've resisted thus far, because 99% of the time when someone wants that reference it's to do something inadvisable)?

[vogloblinsky]

+1

[a3con]

+1

[valqelyan]

+1

[vogloblinsky]

@Rich-Harris do you want a PR on that ?

[linorabolini]

+1 this could be a great addition as it would enable many cool features

[ChrisTalman]

Has there been any more thought on this?

I'd appreciate it if there were a 'reference to the instance'.

I like to organise my Svelte projects with a separation of concerns. The structure (the component template) is mostly separate from the behaviour (default data, lifecycle handlers, event handlers).

As well as being an organisational preference, this approach also integrates well with TypeScript, affording a great degree of safety and IDE integration to my behaviour code.

I was able to do this in Svelte 1 and 2, but this is not currently possible in Svelte 3.

I don't think I'm trying to do anything too funky. I understand that Svelte has become asynchronous. I'm happy to use promises to read and write component properties. I'd just like to be able to write my behaviour outside the component template itself.

If this could be made possible, it would be much appreciated.

[adriengibrat]

I'm using Stencil to create portable custom elements and I really found the way host elements are exposed: https://stenciljs.com/docs/host-element

$$host is being added with #4534 and this is great but do you think adding a svelte:host may be usefull?

[madupuis90]

I'm building a web component and was desperately needing this. Turns out you can get a reference to the component with get_current_component.

  import { get_current_component } from "svelte/internal";

  const thisComponent = get_current_component();