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

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>