Как я могу получить фокус и выбрать событие в моем пользовательском элементе HTML

Question

Я создаю пользовательский элемент HTML.

Пользовательский элемент HTML расширяет элемент ячейки таблицы.

Я включил текстовое поле ввода в этот пользовательский элемент.

Когда пользовательский элемент получил фокус или событие выбора, я хочу, чтобы текстовое поле ввода получило эти события.

Вот мой код:

class DateCell extends HTMLTableCellElement {
				constructor() {
					super();
					this.textBox = document.createElement("input");
					this.textBox.type = "text";
					this.appendChild(this.textBox);
					$(this).addClass("borderCell");
					$(this).addClass("dateCell");
				}
				focus(e)
				{
					this.textBox.focus();
				}
				select(e)
				{
					this.textBox.select();
				}				
				set textContent(t)
				{
					this.textBox.value = t;
				}
				get textContent()
				{
					return this.textBox.value ;
				}
				set value(v) 
				{
					this.textBox.value = v;
					switch (v)
					{
						case "a":
								this.textBox.className="aShiftColor";
								break;
						case "b":
								this.textBox.className="bShiftColor";
								break;
						case "c":
								this.textBox.className="cShiftColor";
								break;		
					}
				}
				get value() {
					return this.textBox.value;
				}
			}
			customElements.define('datacell-string',
				DateCell, {
					extends: 'td'
				});
			$(document).ready(function() {
				var t = document.createElement("table");
				var row = t.insertRow(t.rows);
				var cell1 = new DateCell();
				var cell2 = new DateCell();
				var cell3 = new DateCell();
				row.appendChild(cell1);
				row.appendChild(cell2);
				row.appendChild(cell3);
				
				$(cell1).val("a");
				cell2.value = "c";
				cell2.select();
				$(cell3).val("b");
				$(cell3).focus();
				$(document.body).append(t);
				$("td").each(function(){
					console.log(this.value);
				});
			});

td input[type="text"]			
			{
				//color:white;
				border:none;
				//border:1px solid black;
				height:100%;
				width:100%;
				text-align:center;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}
			td input[type="text"]:focus 
			{
				outline: none;
			}
			table 
			{
				border-spacing: 0;
				border-collapse: collapse;
			}			
			.aShiftColor
			{
				background-color:#ff99cc;
			}
			.borderCell
			{
				border:1px solid #e0e0e0;
			}
			.bShiftColor
			{ 
				background-color:#ffffcc;
			}
			.cShiftColor
			{
				background-color:#ccffcc;
			}
			.dateCell
			{
				margin:0px;
				width:25px;
				padding: 0px;
				text-align: center;
				font-size:17px;
			}

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

К сожалению, ни одно из этих полей ввода не выбрано или не в фокусе.

Answer 1

После нескольких испытаний я обнаружил, что из-за того, что все DateCells не подключены к подключенным к DOM, поэтому эффект «выбрать» и «фокус» не отображается.

Поэтому я изменил следующий код:

   ..............
   cell2.select();
   $(cell3).val("b");
   $(cell3).focus();
   $(document.body).append(t);

до

  ..............
  $(cell3).val("b");
  $(document.body).append(t);
  cell2.select();
  $(cell3).focus();

, тогда это работает!