这是已定义的，但是自定义元素的 children 和 querySelector 失败

Question

我在另一个自定义元素 (edit-table) 中有一个自定义元素 (input-date)。当我将值分配给输入日期时，在 'set value' class 成员函数中我记录：

 console.log(this)

打印出元素

<input-date id="cell" style="height: 100%; width: 300px;">
  <input id="input" placeholder="mm/dd/yyyy, hh:mm am/pm" style="font-family: "Open Sans", sans-serif; height: 100%; width: 100%; text-align: left; font-size: 18px; border: 2px; border-radius: 5px; padding: 5px;">
</input-date>

但是当我这样做的时候

 console.log(this.children);

和

 console.log(this.querySelector('#input'));

我得到 'null'。

带有 'this' 的函数在我输入日期 class

的 'set value' 内

class InputDate extends HTMLElement
{
...
connectedCallback()
{
  var input = document.createElement('Input');
  input.id = 'input';
  this.appendChild(input);
}
set value(val)
{
  //val should be a date object 
  var i = this.querySelector('#input');
  if(i && val)
  {
    i.value = val.toLocaleString();
  }
  console.log(i,val,this, this.childNodes);
}
...
customElements.define('input-date',InputDate);

注意：如果相关，my_date.value = some_date；（调用 'set value' class 成员函数的部分）发生在从 XMLHTTPRequest 到 API.

的完成块中

输入日期是在另一个名为 edit-table.

的自定义元素中创建的

所以我在 'edit-table'

中设置了用户

get_users(function(r)
{
  if(r.hasOwnProperty('error_message'))
  {
    alert(r.error_message);
  }
  else
  {
    var table   = document.getElementById('edit-table');
    table.users = r.users;  
  }
});

然后在 'edit-tables' 'set users' 下，我创建了一个 'input-date' 元素并尝试从服务器分配日期（即 Wed Feb 08 2017 00:00:00 GMT -0500)

class EditUsers extends HTMLElement
...
set users(users)
{  
  ...
  var check  = document.createElement('input-date');
  check.value = new Date('Wed Feb 08 2017 00:00:00 GMT-0500');
}
customElements.define('edit-table',EditTable);
}

有什么想法吗？

Answer 1

哇！不敢相信。多年来我一直在犯这个错误，现在还在犯这个错误....

我需要先完成 custom-element 的 'appendChild'，然后再做

 my_element.value = new Date();

因为在调用 'appendChild' 之前，尚未调用 'connectedCallback()'，因此 'input' 元素尚未附加到我的 custom-element，因此'querySelector' 还找不到 child。

感谢@mickers，我不想拖延细节，但这就是发生的事情。希望对某人有所帮助

这是已定义的，但是自定义元素的 children 和 querySelector 失败

this is defined, but children and querySelector fail for custom element

javascript

jquery-selectors

custom-element