时间戳

首页 > 解决方案 > 元素内部的自定义 div 不保留属性

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的制作。

标签： javascripthtmlcssdomshadow-dom

解决方案

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

引用 MDN

textContentNode 接口的属性表示节点及其后代的文本内容。

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>

推荐阅读