如何从链接的 javascript 文件中访问自定义元素?

问题描述

如果我有这样的剧本

<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 中，如何访问与 constructor() 中的 this 等效的自定义元素?

From within main.js how can I access the custom element which is equivalent to this in the constructor()?

谢谢

推荐答案

您不能按照 此线程:currentScript 属性将返回 null.

You cannot do that as explained in this thread: The currentScript property will return null.

相反，您应该在 之外加载脚本，并从您的自定义元素回调 connectedCallback() 或 调用脚本中定义的函数>constructor().

Instead you should load the script outside of the <template>, and invoke a function defined in the script from your custom element callbacks connectedCallback() or constructor().

这篇关于如何从链接的 javascript 文件中访问自定义元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！