在 JavaScript 中实例化自定义内置元素不起作用

Question

我制作了一个自定义内置元素，可以递归调用自身。但是，在 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>

测试列表元素.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' });

Answer 1

请勿使用

const newlist = document.createElement('ul');
newlist.setAttribute('is','test-list');

创建元素。实例化自定义元素的正确方法是

createElement

选项参数

const newlist = document.createElement('ul', {is: 'test-list'});

或者只是构造函数本身：

const newlist = new TestList();

在 JavaScript 中实例化自定义内置元素不起作用

问题描述投票：0回答：1

1个回答

最新问题

在 JavaScript 中实例化自定义内置元素不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1