我正在使用標(biāo)準(zhǔn)自定義元素和自關(guān)閉自定義元素。當(dāng)聲明彼此緊鄰時，它們并沒有像我預(yù)期的那樣完全工作。如果我寫兩個緊鄰的標(biāo)準(zhǔn)自定義元素：<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>