Question

所以我有这个代码：

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。

Answer 1

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

引用MDN

“节点”界面的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>

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

1 个答案: