svelte - 在 Svelte 3 中访问生成的自定义元素
问题描述
我正在使用 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 的方法来获取对脚本中宿主元素的引用?
谢谢
解决方案
目前这是不可能直接实现的,尽管这将是一个值得的补充。我刚刚提出了一个问题。
间接方法是bind:this={element}
在自定义元素内的顶级元素上执行(假设您有一个),然后您可以执行$: host = element && element.parentNode.host
. 初始化时您将无法访问它,但它会在onMount
.
推荐阅读
- shopify - Dialogflow 和 shopify APi 在订单完成后通知用户
- rust - 错误:使用移动值:`path`。如何更正此代码?
- vuejs2 - 错误:找不到模块 'nanoid/non-secure'
- vba - 如何在允许您访问其方法的变量中保存对由 `querySelectorAll` 匹配的项目的引用?
- java - Junit5 LauncherDiscoveryRequestBuilder selectPackage 找不到测试
- r - 后续:为 data.frame 中的每个 id 值创建错误消息
- android - 将插件应用于 Gradle KTS 项目失败
- r - 识别直方图中的点
- asp.net-mvc - ASP.NET MVC 中的模型缺少定义错误
- java - 使用邻接表检查有向图是否强连接