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 / selector。这是一个核选项，可以返回意外的结果，因为它会刺穿所有的影子DOM。它也不适用于您的自动绑定模板，因为它的内容位于#document-fragment内，而不是#shadow-root。相反，请尝试查询#document-fragment本身。这是首选，因为您将查询限制在模板的范围内，这更精确。

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

无法选择内部元素＆＃34;自动绑定＆＃34;模板

2 个答案: