无法选择“自动绑定"内部的元素模板 [英] Cannot select elements inside "auto-binding" template

问题描述

我已经创建了一些自定义元素，现在我正在为它们编写测试.

I have created some custom elements, now I'm writing tests for them.

我想使用自动绑定" ，因为我有很多需要在元素之间绑定的属性.

I wanted to use "auto-binding" because I have plenty of attributes that needs to be bound among my elements.

不幸的是，我无法查询模板中的任何元素.

Unfortunately I cannot query any element inside the template.

这是一些代码.

    <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>

在测试脚本中，我尝试了以下操作

In the test script I have tried the following

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

但是他们都不起作用.

注意，没有模板，我可以查询我的自定义元素.

Note without the template I can query my custom elements.

推荐答案

auto-binding模板异步标记，我希望您的问题是在查询元素之前需要等待模板标记.

auto-binding templates stamp asynchronously, I expect your problem is that you need to wait for the template to stamp before querying for elements.

发生这种情况时，模板会触发template-bound事件，因此您可以使用如下代码:

The template fires a template-bound event when this happens, so you can use code like this:

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

当然，这意味着您的测试基础结构将需要了解如何处理异步，这可能是一个问题.

Of course, this means your testing infrastructure will need to understand how to handle asynchrony, which can be a concern.

这篇关于无法选择“自动绑定"内部的元素模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！