Access Child object in Custom element

I am creating a custom object which extends a table cell object. The new cell object contains an input text box.

Here is my code:

<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>

I would like to add a "value" attribute to the new cell. I got "Cannot set property 'value' of undefined" when I set the value to the text box. In the "set value(v)" function, "this" is refer to document, not the cell, that is the problem.

Solution

You have to create the textBox-input before you access it with .value. Currently it is not created/assigned when you call .value. A Solution is to do the creation of the input-element inside the constructor of the Cell:

//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>