在自定义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>

我希望一切正常，“伦敦”像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;
  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>

Answer 2

1. [如@CarstenLøvboAndersen在另一个答案中所述-使用shadow.host和replaceChild()
2. [.querySelector()返回第一个匹配的元素，.querySelector()返回所有匹配的元素，因此您需要.querySelectorAll()
3. [您的.querySelectorAll()，.querySelectorAll()和h1函数看起来都非常相似-我随便改写了它们

h2

div