javascript - 不能在自定义 div 中使用两个以上的自定义标签

Question

我有这段代码:-

const h1= (tag) => {
    const ptag = document.querySelector(tag);
          const shadow = ptag.attachShadow({
              mode: 'open'
            });
          const h1 = document.createElement('h1');
          h1.innerHTML = ptag.innerHTML;
          shadow.appendChild(h1);
      }
  const h2= (tag) => {
    const ptag = document.querySelector(tag);
          const shadow = ptag.attachShadow({
              mode: 'open'
            });
          const h2 = document.createElement('h2');
          h2.innerHTML = ptag.innerHTML;
          shadow.appendChild(h2);
      }
      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);
    }
h1('city-name');
h2('we-data');
h2('temp-data');
div('weather-app');

<weather-app>
<city-name>London</city-name>
<we-data>Rains</we-data>
<temp-data>15 C</temp-data>
<city-name>Hi. Does thhis look like h1 text?</city-name>
</weather-app>

我希望一切正常，'London' 像 h1 一样大而粗，其他两个在 h2 中。但我不明白哪里出了问题，现在它们显示为正常文本。如果我在 weather-app 中只使用两个元素，它们工作正常，但超过两个，就不起作用。还有一个，如果你两次使用一个已定义的元素，就像我两次使用 we-data 一样，第一个将按定义显示，但第二个将像普通文本一样显示。请尝试修复此问题。回答和评论表示赞赏。提前致谢。

Answer 1

我想这正是您想要的。问题似乎是 shadow.appendChild() 我认为你需要使用 shadow.host

const h1 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h1 = document.createElement('h1');
  h1.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(h1,shadow.host);
}

此外，不要使用 .appendChild()，而是使用 .replaceChild()

演示

const h1 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h1 = document.createElement('h1');
  h1.innerHTML = ptag.innerHTML;
  h1.style.color = "blue";
  shadow.host.parentNode.replaceChild(h1,shadow.host);
}
const h2 = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'open'
  });
  const h2 = document.createElement('h2');
  h2.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(h2,shadow.host);
}
const div = (tag) => {
  const ptag = document.querySelector(tag);
  const shadow = ptag.attachShadow({
    mode: 'closed'
  });
  const div = document.createElement('div');
  div.innerHTML = ptag.innerHTML;
  shadow.host.parentNode.replaceChild(div,shadow.host);
}
h1('city-name');
h2('we-data');
h2('temp-data');
h1('city-name');
div('weather-app');

<weather-app>
  <city-name>London</city-name>
  <we-data>Rains</we-data>
  <temp-data>15 C</temp-data>
  <city-name>Hi. Does thhis look like h1 text?</city-name>
</weather-app>