所以我有这个代码: -
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 并运行它,但它不会工作。我该如何解决这个问题?这是目前非常重要的。帮助和答案表示赞赏。提前致谢。