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

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