Expose real element from Svelte component

chialab · Jul 16, 2024 · 2ef631a · 2ef631a
1 parent adeabbe
commit 2ef631a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/healthy-pots-jog.md b/.changeset/healthy-pots-jog.md
@@ -0,0 +1,5 @@
+---
+'@chialab/plasma': patch
+---
+
+Expose real element from Svelte component.
diff --git a/src/svelte.ts b/src/svelte.ts
@@ -189,7 +189,8 @@ export function generateSvelteComponent(entry: Entry, options: SvelteTransformOp
     slots.push('<slot />');
 
     const markup = `<!-- svelte-ignore attribute_avoid_is -->
-<${definition.extend ?? definition.name}${
+<${definition.extend ?? definition.name}
+    bind:this={__element}${
         definition.extend
             ? `
     is="${definition.name}"`
@@ -225,6 +226,11 @@ export function generateSvelteComponent(entry: Entry, options: SvelteTransformOp
         };
     }
 
+    let __element;
+    export function getElement() {
+        return __element;
+    }
+
     ${props.map((propName) => `export let ${propName} = undefined;`).join('\n    ')}
 </script>
 
@@ -278,6 +284,7 @@ export type ${declaration.name}Slots = typeof __propDef.slots;
 export class ${declaration.name} extends SvelteComponent<${declaration.name}Props, ${declaration.name}Events, ${
         declaration.name
     }Slots> {
+    getElement(): Base${declaration.name};
 }
 `;