当紧接在另一个自关闭自定义元素之前时，自关闭自定义元素不显示

Question

我正在使用标准自定义元素和自关闭自定义元素。当声明彼此紧邻时，它们并没有像我预期的那样完全工作。如果我写两个紧邻的标准自定义元素：<colour-list scheme="rainbow"></colour-list> <colour-list scheme="zebra"></colour-list>它们都正常显示：const schemes = {  rainbowJSON : '["red", "orange", "yellow", "green", "blue", "indigo", "violet"]',  zebraJSON : '["black", "white", "black", "white", "black"]'}class colourList_CustomElement extends HTMLElement {    constructor() {    super();    this.root = this.attachShadow({mode: "open"});  }  connectedCallback() {    this.root.innerHTML = `          <style>        :host {          display: inline-block;  /* <= Because Custom elements are display:inline by default */          contain: content;  /* <= Because this delivers an immediate performance win */        }                ul {          margin: 0 24px 0 0;          padding: 0;          width: 200px;          list-style-type: none;        }                li {          height: 24px;          text-align: center;          font-weight: bold;          text-shadow: 1px 1px rgba(0, 0, 0, 0.7);        }              </style>          `;        let schemeJSON = schemes[this.getAttribute('scheme') + 'JSON'];    let colours = JSON.parse(schemeJSON);    let colourList = document.createElement('ul');    let listItem;        for (let colour of colours) {          listItem = document.createElement('li');      let textShadow = (colour === 'black') ? 'text-shadow: 1px 1px rgba(255, 255, 255, 0.7);' : '';      listItem.setAttribute('style', 'color: '+ colour + '; background-color: ' + colour + ';' + textShadow);      listItem.textContent = colour;      colourList.appendChild(listItem);    }        this.root.appendChild(colourList);  }}customElements.define('colour-list', colourList_CustomElement);<colour-list scheme="rainbow"></colour-list><colour-list scheme="zebra"></colour-list>

Answer 1

请注意，您可以创建未知元素（创建一个 FOUC），您可以将其querySelect处理成您想要的内容，然后从 DOM 中删除

<my-elements>

  <green id=foo />

  <red id=bar />

  Bye Bye World

</my-elements>

Hello World!

<script>

  customElements.define('my-elements', class extends HTMLElement {

    connectedCallback() {

      setTimeout(() => {

        this.append(...[...this.querySelectorAll("*")].map(node => {

          console.log(node.outerHTML);

          let div = document.createElement("div");

          div.style.color = node.nodeName;

          div.innerHTML = `${node.id} ${node.nodeName}`;

          node.remove();

          return div;

        }));

      });

    }

  });

</script>