javascript - 元素内部的自定义div不保留属性

所以我有这段代码：

const div = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
     mode: 'closed'
  });
  const div = document.createElement('div');
  div.textContent = ptag.textContent;
  shadow.appendChild(div);
}
div('foo-bar')

<foo-bar>
  <h1>Hi</h1>
</foo-bar>

我希望“ Hi”将以常见的h1标签（如样式）出现，但在这里却没有。原因可能是什么。

修复赞赏。在此先感谢合作者。感谢制作custags.js。

最佳答案

关于您正在使用的div.textContent，这只会获取内容字符串，而不是整个HTML。

报价MDN


  Node接口的textContent属性表示节点及其后代的文本内容。
  
  Element.innerHTML返回HTML，如其名称所示。有时人们使用innerHTML来检索或写入元素内的文本，但是textContent具有更好的性能，因为其值未解析为HTML。此外，使用textContent可以防止XSS攻击。


有关Node.textContent的更多信息。

在这种情况下，最好使用innerHTML，因为您要在此处保留h1中的foo-bar。

const div = (tag) => {
const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
      mode: 'closed'
    });
  const div = document.createElement('div');
  div.innerHTML = ptag.innerHTML;
  shadow.appendChild(div);
}
div('foo-bar')

<foo-bar>
<h1>Hi</h1>
</foo-bar>

关于javascript - 元素内部的自定义div不保留属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58183880/