0

所以我有这个代码: -

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()做了一件事:- 它选择自定义元素,更改其标签类型并分配自定义标签名称的 id 并将其替换为所需的东西。它在这里工作正常。但是如果我在外部 .js 文件中对构建函数之后的所有内容进行编码,然后将其绑定到 html 并运行它,但它不会工作。我该如何解决这个问题?这是目前非常重要的。帮助和答案表示赞赏。提前致谢。

4

0 回答 0