1

如果我有这样的脚本

<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()？

谢谢

4

2 回答 2

1

您不能按照此线程中的说明执行此操作：该currentScript属性将返回null。

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

于 2017-08-19T22:26:02.100 回答
0

您必须访问currentScript组件外部。我用这个：

var frag = (document.currentScript||document._currentScript).ownerDocument.querySelector('template').content;

我(document.currentScript||document._currentScript)用来处理 polyfills。

然后在您的构造函数中，您将使用：

const instance = frag.cloneNode(true);

此时frag是一个document-fragment并且可以包含任意数量的孩子。所有这些都将通过调用来复制，cloneNode以便您的 Web 组件的每个实例都有自己的 DOM 副本。

于 2017-12-01T22:46:22.320 回答