Как получить доступ к пользовательскому элементу из связанного файла JavaScript?

Question

Если бы у меня был такой скрипт

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

Спасибо

Answer 1

Вы не можете сделать это, как описано в этой теме: currentScript собственность вернется null,

Вместо этого вы должны загрузить скрипт за пределами <template>и вызовите функцию, определенную в скрипте, из ваших пользовательских обратных вызовов connectedCallback() или же constructor(),

Answer 2

Вы должны получить доступ currentScript вне компонента. Я использую это:

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

я использую (document.currentScript||document._currentScript) обрабатывать полифилы.

Тогда в вашем конструкторе вы будете использовать:

const instance = frag.cloneNode(true);

С этой точки зрения frag это document-fragment и может содержать любое количество детей. Все они будут воспроизведены при обращении к cloneNode так что каждый экземпляр вашего веб-компонента имеет свою собственную копию DOM.