访问自定义元素中的子对象

Question

我正在创建一个扩展 table 单元格对象的自定义对象。新的单元格对象包含一个输入文本框。

这是我的代码：

<html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        //table
        class DataTable extends HTMLTableElement {
          constructor() {
            super()
            console.info('data-table created')
          }
        }       
        customElements.define('data-table', 
                            DataTable, 
                            {
                              extends: 'table'
                            });

        //cell 
        class DataCell extends  HTMLTableCellElement {
          connectedCallback() {
            console.info('cell connected')
            if (typeof this.renderContent === 'function')
              this.renderContent()
          }
          renderContent() {
            console.info('data-string render')
            this.textBox= document.createElement("input");
            this.textBox.type="text";
            this.appendChild(this.textBox); 

          }
          set value(v)
          {
            this.textBox.value=v;
          }
          get value()
          {
            return this.textBox.value;
          }
        }
        customElements.define('data-string', 
                            DataCell, 
                            {
                                extends: 'td'
                            });

        $( document ).ready(function(){
                var t=new DataTable();
                var row=t.insertRow(t.rows);
                var cell=new DataCell();

                row.appendChild(cell);
                cell.value="gfg";
                $(document.body).append(t);
            });
    </script>
    </head>
    <body>
        <h4>Test Table Extension v1</h4>

    </body>
</html>

我想向新单元格添加 "value" 属性。当我将值设置为文本框时，我得到了 "Cannot set property 'value' of undefined"。在 "set value(v)" 函数中，"this" 是指文档，而不是单元格，这就是问题所在。

Answer 1

您必须先创建 textBox-input，然后才能使用 .value 访问它。当前调用 .value 时不是 created/assigned。一个解决方案是在 Cell 的构造函数中创建 input-element：

//table
class DataTable extends HTMLTableElement {
    constructor() {
        super();
        console.info('data-table created');
    }
}
customElements.define('data-table',
    DataTable, {
        extends: 'table'
    });

//cell 
class DataCell extends HTMLTableCellElement {
    constructor() {
        super();
        this.textBox = document.createElement("input");
        this.textBox.type = "text";
        console.info('data-cell created');
    }
    connectedCallback() {
        console.info('cell connected')
        if (typeof this.renderContent === 'function')
            this.renderContent()
    }
    renderContent() {
        console.info('data-string render')
        this.appendChild(this.textBox);

    }
    set value(v) {
        this.textBox.value = v;
    }
    get value() {
        return this.textBox.value;
    }
}
customElements.define('data-string',
    DataCell, {
        extends: 'td'
    });

$(document).ready(function() {
    var t = new DataTable();
    var row = t.insertRow(t.rows);
    var cell = new DataCell();

    row.appendChild(cell);
    cell.value = "gfg";
    $(document.body).append(t);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h4>Test Table Extension v1</h4>

访问自定义元素中的子对象

Access Child object in Custom element

javascript

custom-element