我制作了一个自定义的内置元素，它递归地调用自己.但是，在JavaScript中生成的子元素不是从自定义内置元素继承的.考虑到HTML的初始调用运行正常，我怀疑问题可能源于通过JavaScript添加控件时的页面生命周期.有没有想过为什么会发生这种情况？
HTML
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul is="test-list" id="testList">
</ul>
<script type="module" src="/js/Test-list-element.js"></script>
<script>
let data = [
{
name: 'a',
data: [{
name: 'a',
data: []
},
{
name: 'b',
data: []
},
{
name: 'c',
data: []
},
{
name: 'd',
data: []
}]
},
{
name: 'b',
data: [{
name: 'a',
data: []
},
{
name: 'b',
data: []
},
{
name: 'c',
data: []
},
{
name: 'd',
data: []
}]
},
{
name: 'c',
data: [{
name: 'a',
data: []
},
{
name: 'b',
data: []
},
{
name: 'c',
data: []
},
{
name: 'd',
data: []
}]
},
{
name: 'd',
data: [{
name: 'a',
data: []
},
{
name: 'b',
data: []
},
{
name: 'c',
data: []
},
{
name: 'd',
data: []
}]
},
];
window.onload = (event) => {
let listElement = document.getElementById("testList");
listElement.data = data;
}
</script>
</body>
</HTML>
Test-list-element.js
class testList extends HTMLUListElement {
constructor() {
super();
this.render = this.render.bind(this);
}
#data = null;
set data(value) {
this.#data = value;
this.render();
}
render(){
if(!this.#data) return;
this.#data.forEach(element => {
let newItem = document.createElement('li');
newItem.innerText = element.name;
this.appendChild(newItem);
if(element.data)
{
let newlist = document.createElement('ul');
newlist.setAttribute('is','test-list')
newlist.data = data;
newItem.appendChild(newlist);
}
});
}
}
customElements.define('test-list', testList, { extends: 'ul' });
