Не может использовать более двух пользовательских тегов в пользовательском 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. Но я не мог понять, что пошло не так, и теперь они отображаются как обычный текст. Если я использую только два элемента в погодном приложении, они работают нормально, но больше, чем два, не работают. И еще один, если вы используете определенный элемент дважды, как я дважды использовал 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>

Answer 2

1. Как указано в другом ответе @Carsten Løvbo Andersen - используйте shadow.host и replaceChild()
2. .querySelector() возвращает первый соответствующий элемент, .querySelectorAll() возвращает все совпадающие элементы, поэтому вам нужно .querySelectorAll()
3. Ваши h1, h2 и div функции выглядят очень похожими - я взял на себя смелость и переписал их

const foo = (elementTag, shadowMode) => tag => {
  const query = document.querySelectorAll(tag);
  query.forEach(ptag => {
    const shadow = ptag.attachShadow({
      mode: shadowMode
    });
    const element = document.createElement(elementTag);
    element.innerHTML = ptag.innerHTML;
    shadow.host.parentNode.replaceChild(element, shadow.host);
  });
};

const h1 = foo('h1', 'open');
const h2 = foo('h2', 'open');
const div = foo('div', 'closed');

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>