Как получить доступ к пользовательскому элементу из связанного файла 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 как я могу получить доступ к пользовательскому элементу, который эквивалентен this в constructor()?

Спасибо


javascript web-component custom-element html5-template
person omega    schedule 19.08.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person Supersharp    schedule 19.08.2017

arrow_upward
0
arrow_downward

Вы должны получить доступ к 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.

person Intervalia    schedule 01.12.2017