紧跟在另一个自闭式自定义元素前面时，不显示自闭式自定义图元

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>

---

如果，或者，我有一个自动关闭的自定义元素紧跟在一个标准自定义元素之后：

<colour-list scheme="rainbow"></colour-list>
<colour-list scheme="zebra" />

它们也都正常显示：

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 scheme="rainbow" />
<colour-list scheme="zebra" />

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 scheme="zebra" />

我不清楚为什么在最后一个例子中两个元素都没有显示。

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>