问题描述
当彼此直接相邻声明时,它们无法像我预期的那样完全工作。
如果我编写两个彼此紧邻的标准自定义元素:
<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","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.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,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",colourList_CustomElement);
<colour-list scheme="rainbow"></colour-list>
<colour-list scheme="zebra" />
但是,最后,如果我有两个自动关闭元素,一个紧接在前一个元素之后,则第二个自定义元素根本不会显示:
<colour-list scheme="rainbow" />
<colour-list scheme="zebra" />
const schemes = {
rainbowJSON : '["red",colourList_CustomElement);
<colour-list scheme="rainbow" />
<colour-list scheme="zebra" />
解决方法
从上面的评论继续...
请注意,您可以创建未知元素(创建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>