如果我有这样的脚本
<template id="x-foo-from-template">
<script src="/js/main.js"></script>
</template>
<script>
customElements.define('my-header', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
const t = document.currentScript.ownerDocument.querySelector('#x-foo-from-template');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
// set up title
var title = this.getAttribute("title");
var div = document.createElement("div");
div.innerText = title;
shadowRoot.appendChild(div);
}
});
</script>
如何从
main.js
中访问与this
中的constructor()
等效的自定义元素?谢谢
最佳答案
您不能按照this thread中的说明进行操作:currentScript
属性将返回null
。
相反,您应该在<template>
之外加载脚本,然后从自定义元素回调connectedCallback()
或constructor()
调用脚本中定义的函数。
关于javascript - 如何从链接的javascript文件中访问自定义元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45772685/