无法选择“自动绑定"内部的元素模板 [英] 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屋!