Доступ к сгенерированному пользовательскому элементу в Svelte 3 - PullRequest
Новая
       31

Доступ к сгенерированному пользовательскому элементу в Svelte 3

0 голосов
/ 31 мая 2019

Я использую Svelte 3 с возможностью создания пользовательских элементов с помощью Shadow DOM, но не могу понять, как получить ссылку на пользовательский элемент-оболочку (HTMLElement), чтобы я мог присоединять обработчики событий и манипулировать атрибутами. У меня есть что-то вроде этого: 

<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>

Биты "this" не работают (они работают в обычном обычном элементе Vanilla). Есть ли в Svelte какой-то особый способ получения ссылки на элемент host в скрипте?

Спасибо

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

В настоящее время это невозможно напрямую, хотя это было бы полезным дополнением. Я только что поднял вопрос .

Косвенным подходом было бы сделать bind:this={element} для элемента верхнего уровня внутри вашего пользовательского элемента (при условии, что он у вас есть), тогда вы могли бы сделать что-то длинное в строках $: host = element && element.parentNode.host. У вас не будет доступа к нему при инициализации, но он будет готов в onMount.

0 голосов
/ 14 июня 2019

Я думаю, что вы хотите создать элемент, который окружает слот, и затем связать его с переменной, используя bind:this={var}, как показано в этом примере: https://svelte.dev/docs#Binding_a_DOM_node

, что-то вроде 

<custom-button bind:this={customButton}>
<slot></slot>
</custom-button>

Затем используйте эту связанную переменную (customButton), которая в javascript, вместо this, например, так: 

let customButton;

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

И так далее

...