Reference self + `$$self` is an illegal variable name

[ronen-e]

Describe the bug

I wanted to get a reference to the svelte component inside of the component file.

I'm using svelte to render customElement (with "tag" option).

The reason for getting a reference was the need for dispatching a composed event which can be picked up by the host page, beyond the web component's shadow DOM.

bind:this

I tried using bind:this on the top level element but that gives a reference to the specific element, not the root web component.

• I can use bind:this in a container component like in the example but I would prefer to reference the component from inside the component (file) itself.

/* container.svelte */
import Component from "./component.svelte"
let ref;

<Component bind:this={ref}  />

$$self

I saw a variable named $$self in the scope, which references the webComponent but using it gives

ValidationError $$self is an illegal variable name

• I can turn the error to a warning using the compiler options of errorMode="warn"
  but I would prefer to keep the error mode as it is.

• I can also use eval('$$self') which works but is not ideal and gives another compiler warning

• I'm also concerned with using an undocumented variable - I did not find documentation about $$self. Is it meant for internal use only?

I noticed the illegal variable name issue can be resolved by adding $$self to the list of reserved keywords for the svelte compiler

const reserved_keywords = new Set(['$$props', '$$restProps', '$$slots']);

Related

• Get access to a component's own class in the script and script module ("$$self" or else) #5517
• $$host (or some way to access custom element instance) #3091
• Get a reference to the "root" element when creating a "custom element" #3593
• add $$host #4534
• Add <svelte:this /> tag rfcs#58
• Discord chat 1, Discord chat 2

Reproduction

https://svelte.dev/repl/71cb45d247f94ea5896f7de2303cbe8a?version=3.42.4

Logs

No response

System Info

Not system related

Severity

annoyance

[Conduitry]

The issue #5517 that you linked to would be a better thing to follow for this. $$self isn't part of the API, which should be fairly obvious given the hoops you have to jump through to access it. It could stop working without warning at any time.

[ronen-e]

My main concern was referencing the component itself - that is the real issue.

$$self was mentioned as something I tried to do to resolve the issue, like bind:this

@Conduitry that issue #5517 I linked to has been open since Oct 11, 2020.

Is there an official way of referencing the component itself from inside the component itself ?

---

EDIT: This seems like a possible solution #3091 (comment)

  import { get_current_component } from "svelte/internal";

  const thisComponent = get_current_component();