Estoy creando un componente esbelto en uso: función de acción y necesito obtener el elemento DOM del componente esbelto. No puedo descifrar cómo vincular o simplemente obtener una referencia al elemento DOM en este escenario. Una forma que pensé fue darle al elemento un atributo único, una clase o cualquier identificador para usar document.querySelect, agarrarlo, pero creo que debería haber una forma de obtener el elemento, ya que lo creo allí mismo. Estoy buscando una API equivalente a bind:this.
Código de ejemplo
import ToolTip from '$lib/components/tooltips/Plain.svelte'; export default function (node: HTMLElement) { const title = node.getAttribute('title'); let tooltipComponent = new ToolTip({ props: { title, }, target: node, }); const tooltip = undefined; // ?? how to get the DOM element here let arrow = tooltip.querySelector('#tooltip-arrow'); let update = () => { compute(node, tooltip, arrow); }; node.addEventListener('mouseenter', update); node.addEventListener('focus', update); return { update() { }, destroy() { node.removeEventListener('mouseenter', update); node.removeEventListener('focus', update); tooltipComponent.$destroy(); }, }; }Una forma en que pensé en hacerlo
const uniqueId = generateUniqueId(); let tooltipComponent = new ToolTip({ props: { title, class: `tooltip-${uniqueId}`, }, target: node, }); const tooltip = tooltip.querySelector(`.tooltip-${uniqueId}`);Alternativamente a consultar el elemento, se podría establecer una referencia dentro del componente con bind:this y hacerla accesible a través de <svelte:options accessors={true}/> o una función REPL
<script> import Tooltip from './Tooltip.svelte' function addTooltip(node) { const title = node.getAttribute('title'); const tooltipComp = new Tooltip({ target: node , props: {title}}); const tooltipElem = tooltipComp.tooltip tooltipElem.style.background = 'lightblue' const tooltipElemFn = tooltipComp.getTooltipElem() tooltipElemFn.style.border = '2px solid purple' } </script> <div use:addTooltip title="tooltip"> I have a tooltip </div> <svelte:options accessors={true}/> <script> export let title // export variable with option accessors={true} OR make accessible via function export let tooltip export function getTooltipElem() { return tooltip } </script> <div bind:this={tooltip}> {title} </div>No hay una forma garantizada de encontrar ningún elemento porque los componentes no necesariamente crean ninguno. Usar algún identificador único o la jerarquía DOM puede funcionar si conoce la estructura del componente que crea.
Solo asegúrese de mirar dentro del target en el que monta el componente. Así que usa algo como node.querySelector(...) .