無法選擇「自動綁定」模板中的元素

Question

我已經創建了一些自定義元素，現在我正在爲它們編寫測試。

我想用"auto-binding"，因爲我有很多屬性需要綁定在我的元素中。

不幸的是，我無法查詢模板內的任何元素。

這是一些代碼。

<template id="root" is="auto-binding"> 
     <dalilak-data-service id="dds" regions="{{regions}}"></dalilak-data-service> 

     <dalilak-regions-handler id="drh" regions="{{regions}}" flattendedRegions="{{flattendRegions}}" descendantsRegionNames="{{descendantsRegionNames}}" regionsByNameId="{{regionsByNameId}}"></dalilak-regions-handler> 

    </template> 

在測試腳本中，我曾嘗試以下

drh = document.querySelector('#drh'); 
    suite('dalilak-regions-handler', function() { 
     test('handler initialized', function() { 
      assert.ok(drh); 
     }); 
    }); 

也試過這樣：

drh = document.querySelector('* /deep/ #drh'); // or '#root /deep/ #drh'  
    suite('dalilak-regions-handler', function() { 
     test('handler initialized', function() { 
      assert.ok(drh); 
     }); 
    }); 

但是沒有一次成功。

注意沒有模板我可以查詢我的自定義元素。

Answer 1

auto-binding模板郵票異步，我期待你的問題是，你需要等待模板查詢元素之前的郵票。

模板觸發一個template-bound事件，當出現這種情況，所以你可以使用這樣的代碼：

addEventListener('template-bound', function() { 
    drh = document.querySelector('#drh'); 
    ... 
}); 

當然，這意味着你的測試基礎設施將需要了解如何處理異步，它可以是一個關心。

Answer 2

在可能的情況下，最好避免/ deep /選擇器。這是一個核選項，可以返回意想不到的結果，因爲它會穿透所有影子DOM。它也不適用於您的自動綁定模板，因爲它的內容位於#document-fragment之內，而不是#shadow-root。相反，請嘗試查詢#document-fragment本身。這更好，因爲你正在限制你的查詢到你的模板的範圍，這更準確。

var template = document.querySelector('#root'); 
var drh = template.content.querySelector('#drh');