在Svelte 3中访问生成的自定义元素
在Svelte 3中访问生成的自定义元素
提问于 2019-05-31 13:54:31
我正在使用Svelte3和选项来生成带有阴影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特定的方法来获取对脚本中的host元素的引用？
谢谢
回答 3
Stack Overflow用户
发布于 2019-06-24 21:02:43
目前，这还不能直接实现，尽管这将是一个有价值的补充。我刚做了raised an issue。
间接的方法是在您的自定义元素内的顶级元素上执行bind:this={element} (假设您有一个)，然后您可以执行一些$: host = element && element.parentNode.host行较长的操作。你不能在初始化时访问它，但是在onMount中它已经准备好了。
Stack Overflow用户
发布于 2019-06-14 06:39:11
我认为您需要创建一个围绕槽的元素，然后使用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);
}诸若此类
Stack Overflow用户
发布于 2019-12-09 23:23:35
一种可能的解决方案是使用svelte/ get_current_component的内部函数
import { get_current_component } from 'svelte/internal';
let host = get_current_component();我认为导出这个函数会非常有用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56389375
复制相关文章
相似问题
腾讯云开发者
