Как найти элемент в импортируемом документе?

Question

[Dmitry Demin]

Здравствуйте. Решил попробовать в деле концепцию web components. Есть код:

<template id="load-task">
    <div class="load-task">
        <div class="load-task-name">
            <content></content>
        </div>
        <div class="load-task-progress">
            <div class="load-task-progress-inner"></div>
        </div>
    </div>
</template>

И есть JS логика:

var template=document.querySelector('#load-task');
var loadTask=Object.create(HTMLElement.prototype, {});
loadTask.progress=0;
loadTask.state=0;
var getState=function(n) {
    if (n>0) return 'success';
    if (n<0) return 'fail';
    return '';
};
var attribs={
    progress:function(oldV,newV) {
        this.querySelector('.load-task-progress-inner').style.width=progress+'%';
    },
    state:function(oldV,newV) {
        var _state=getState(oldV);
        if (_state.length>0&&this.classList.contains(_state))
            this.classList.remove(_state);
        _state=getState(newV);
        if (_state.length>0&&!this.classList.contains(_state))
            this.classList.add(_state);
    }
};
loadTask.createdCallback=function() {
    var shadow = this.createShadowRoot();
    shadow.resetStyleInheritance = true;
    shadow.appendChild(template.content);
    for (var name in attribs)
        attribs[name].call(this,undefined,this[name]);
};
loadTask.attributeChangedCallback=function(name, oldV, newV) {
    if (!!attribs[name])
        attribs[name].call(this,oldV,newV);
};
document.registerElement('load-task', { prototype: loadTask });

При запуске сего кода всё работает хорошо, но стоит подключить его к другому при помощи link rel="import" как всё ломается.
Обращаем внимание на первую строку логики
var template=document.querySelector('#load-task');
По не понятным мне причинам в импортируемых документах не находятся вообще никакие элементы и не важно в каком месте их объявить. Поиск в интернетах ничего не дал.
Подкажите, пожалуйста, как решить проблему.

Answer 1

[vix]

var templat=document.currentScript.ownerDocument.querySelector('#load-task');

Answer 2

[Kofi]

Сначала обратитесь к содержимому импорта:

var content = link.import;
var template = content.querySelector('#load-task');

Comments

[Dmitry Demin]

Скрипт подключается в импортируемом файле. Как я найду элемент link, если он должен содержать тот документ, в котором и подключается скрипт?

[Dmitry Demin]

Я попробовал вашу схему, однако, как было описано выше, элементы ВООБЩЕ не находятся. Т.е. document.querySelector('link[rel=import][href*="load-task-template"]') возвращает null.

[Dmitry Demin]

Как выяснилось, причина в контексте выполнения. Скрипты выполняются в глобальном контексте, что не очень удобно т.к. путь к файлу узнать до сих пор не удалось.

[Kofi]

Dmitry Dyomin: решили проблему?

[Dmitry Demin]

Kofi: свою проблему решил, однако на вопрос ответ так и не был найден. Получить контекст документа без знания имени файла пока не известно как, а без этого и поиск в том самом документе невозможен (опять же, без знания его имени).