无法选择“自动绑定”模板中的元素

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