1
votes

Accéder à l'élément personnalisé généré dans Svelte 3

J'utilise Svelte 3 avec l'option de générer des éléments personnalisés avec Shadow DOM mais je ne parviens pas à trouver comment obtenir une référence à l'élément personnalisé wrapper (HTMLElement) afin de pouvoir attacher des gestionnaires d'événements et manipuler des attributs. J'ai quelque chose comme ceci:

<svelte:options tag="custom-button"/>

<script>
    import { onMount } from 'svelte';

    function _onClick(e) {
        this.setAttribute('pressed', null);
    }

    var _boundClick = _onClick.bind(this);

    onMount((e) => {
        this.addEventListener('click', _boundClick);

        return () => {
            this.removeEventListener('click', _boundClick);
        };
    });
</script>

<style>
  :host {
    display: block;
  }

  /* Other Styling */
</style>

<slot></slot>

Les bits "this" ne fonctionnent pas (ils le font dans un élément personnalisé vanilla normal). Existe-t-il un moyen spécifique à Svelte d'obtenir une référence à l'élément hôte dans un script?

Merci

svelte svelte-component

0 commentaires

3 Réponses :

1
votes

Je pense que vous voulez créer un élément qui entoure l'emplacement, puis le lier à une variable en utilisant bind: this = {var} comme indiqué dans cet exemple: https://svelte.dev/docs#Binding_a_DOM_node

donc quelque chose comme

let customButton;

function _onClick(e) {
        customButton.setAttribute('pressed', null);
}

0 commentaires

7
votes

À l'heure actuelle, ce n'est pas possible directement, même si ce serait un ajout intéressant. Je viens de signalé un problème .

L'approche indirecte serait de faire bind: this = {element} sur l'élément de niveau supérieur à l'intérieur de votre élément personnalisé (en supposant que vous en ayez un), alors vous pourriez faire quelque chose de long sur les lignes de $: host = element && element.parentNode.host . Vous n'y auriez pas accès lors de l'initialisation, mais il serait prêt dans onMount .

1 commentaires

Cela a fonctionné pour moi. Cependant, un nitpick: host n'était toujours pas défini dans onMount, mais il était disponible dans un gestionnaire de clics (quelques nanosecondes plus tard).

0
votes

Une solution possible est d'utiliser la fonction get_current_component de svelte / internal

import { get_current_component } from 'svelte/internal';

let host = get_current_component();

Je pense que l'exportation de cette fonction serait très utile.

0 commentaires