Question

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

谢谢

Answer 1

我认为您想创建一个围绕插槽的元素，然后使用toupper将其绑定到变量，如本示例所示：https://svelte.dev/docs#Binding_a_DOM_node

类似

bind:this={var}

然后使用javascript中的绑定变量（<custom-button bind:this={customButton}> <slot></slot> </custom-button>），而不是像这样的customButton：

this

依此类推

Answer 2

目前尚无法直接实现，尽管这是值得添加的。我只是raised an issue。

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

Answer 3

一种可能的解决方案是使用svelte / internal的get_current_component函数

import { get_current_component } from 'svelte/internal';

let host = get_current_component();

我认为导出此功能将非常有用。

在Svelte 3中访问生成的自定义元素

3 个答案: