Невозможно выбрать элементы внутри шаблона автоматической привязки

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

По возможности лучше избегать/глубокий/селектор. Это ядерный вариант и может возвращать неожиданные результаты, поскольку он пробивает все теневые DOM. Он также не будет работать для вашего шаблона автоматического связывания, потому что его содержимое находится внутри #document-fragment, а не #shadow-root. Вместо этого попробуйте выполнить запрос непосредственно к #document-fragment. Это предпочтительнее, потому что вы ограничиваете свой запрос сферой вашего шаблона, что намного точнее.

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