這是已定義的，但children和querySelector對自定義元素失敗

我在另一個自定義元素（edit-table）中有一個自定義元素（input-date）。當我去賦值給輸入日期，「設置值」類的成員函數裏面我登錄：這是已定義的，但children和querySelector對自定義元素失敗

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'));

我得到'空'。

與功能「這個」是我輸入Date類內「設定值」

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'類成員函數的部分）發生在從XMLHTTPRequest到API的完成塊中。

輸入日期是在名爲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; 
    } 
});

用戶然後在「編輯表」'設定用戶的，我創建一個「輸入日期」元素，並嘗試分配從日期服務器，（這是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); 
}

有什麼想法嗎？

來源

2017-08-14 user1709076

你能向我們展示更多的上下文嗎？我們不知道「this」是什麼或什麼。 –

是你的console.log內的函數？如果是這樣，那麼可以將該'this'的引用設置爲該函數的範圍而不是外部代碼。在你嘗試記錄this.children或你的querySelector之前，你能告訴我這是什麼嗎？ – Mickers

絕對。添加更多代碼和上下文 – user1709076

哇！不能相信它。我一直在犯這個錯誤了多年，現在還在做它....

我需要做「的appendChild」我的自定義元素之前做

my_element.value = new Date();

因爲直到「的appendChild」是所謂'connectedCallback（）'尚未被調用，因此'input'元素不會被添加到我的自定義元素中，因此'querySelector'不能找到孩子。

感謝@mickers，我不想陷入細節，但這是發生了什麼事。希望能幫助別人

來源

2017-08-14 21:31:26 user1709076

這是已定義的，但children和querySelector對自定義元素失敗

回答

相關問題