1

我正在使用 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”位不起作用（它们在普通的香草自定义元素中起作用）。是否有一些特定于 Svelte 的方法来获取对脚本中宿主元素的引用？

谢谢

4

3 回答 3

8

目前这是不可能直接实现的，尽管这将是一个值得的补充。我刚刚提出了一个问题。

间接方法是bind:this={element}在自定义元素内的顶级元素上执行（假设您有一个），然后您可以执行$: host = element && element.parentNode.host. 初始化时您将无法访问它，但它会在onMount.

于 2019-06-24T13:02:42.570 回答
1

我认为您想创建一个围绕插槽的元素，然后使用bind:this={var}此示例中所示将其绑定到变量：https ://svelte.dev/docs#Binding_a_DOM_node

所以像

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

然后使用 javascript 中的绑定变量（customButton），而不是this像这样：

let customButton;

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

等等

于 2019-06-13T22:39:11.430 回答
0

One possible solution is to use the get_current_component function of svelte/internal

import { get_current_component } from 'svelte/internal';

let host = get_current_component();

I think that exporting this function would be very useful.

于 2019-12-09T15:23:34.893 回答