这是已定义的，但自定义元素的子元素和 querySelector 失败答案

【问题标题】：this is defined, but children and querySelector fail for custom element这是已定义的，但自定义元素的子元素和 querySelector 失败
【发布时间】：2017-08-14 20:30:01
【问题描述】：

我在另一个自定义元素（编辑表）中有一个自定义元素（输入日期）。当我将值分配给输入日期时，在“设置值”类成员函数中我记录：

 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 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; （调用“设置值”类成员函数的部分）发生在从 XMLHTTPRequest 到 API 的完成块中。

input-date 是在另一个名为 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;  
  }
});

然后在“编辑表”“设置用户”下，我创建一个“输入日期”元素并尝试从服务器分配日期，（2017 年 2 月 8 日星期三 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);
}

有什么想法吗？

【问题讨论】：

你能告诉我们更多的上下文吗？我们不知道this 是什么。
你的console.log在一个函数里面吗？如果是这样，那么对“this”的引用可能会设置为函数的范围，而不是外部代码。在您尝试记录 this.children 或您的 querySelector 之前，您能告诉我“this”是什么吗？
绝对。添加了更多代码和上下文
我无法重现您的问题。
在这里工作：jsfiddle.net/barmar/y858qkwt/2 请创建一个 MCVE 来演示问题。

标签： javascript jquery-selectors custom-element

【解决方案1】：

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

我需要在做之前对我的自定义元素做 'appendChild'

 my_element.value = new Date();

因为在调用 'appendChild' 之前，尚未调用 'connectedCallback()'，因此 'input' 元素尚未附加到我的自定义元素，因此 'querySelector' 无法找到子元素.

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

【讨论】：