querySelector для пользовательских элементов не будет работать во внешних файлах - PullRequest
Новая
       6

querySelector для пользовательских элементов не будет работать во внешних файлах

0 голосов
/ 04 октября 2019

Итак, у меня есть этот код: -

const extendCSS = (el1, el2) =>{
  Array.prototype.slice.call(document.querySelector(el1).attributes).forEach(function(item) {
    el2.setAttribute(item.name, item.value);
  });
}
const build = (elementType) => tag => {
  const query = document.querySelectorAll(tag);
  query.forEach(ptag => {
    const shadow = ptag.attachShadow({
      mode: 'open'
    });
    const element = document.createElement(elementType);
    element.innerHTML = ptag.innerHTML;
    extendCSS(tag, element);
    element.setAttribute('id', tag);
    shadow.host.parentNode.replaceChild(element, shadow.host);
  });
};
const h1 = build('h1');
const textarea = build('textarea');
textarea("text-editor");
h1("text-value");

const texteditor = document.querySelector('#text-editor');
const textvalue = document.querySelector('#text-value');
texteditor.addEventListener('keydown', ()=>{
textvalue.innerHTML = texteditor.value;
});
<text-editor></text-editor>
<text-value></text-value>

Это build() делает одну вещь: - он выбирает пользовательский элемент, изменяет его тип тега и назначает идентификатор имени пользовательского тега и заменяет егос желаемой вещью. Здесь работает нормально. но если я запишу все это после функции сборки во внешнем файле .js, а затем свяжу его с html и запуском, но это не сработает. Как я могу решить это? Это очень важно на данный момент. Помощь и ответы приветствуются. Заранее спасибо.

...