JavaScript в рамках лучших практик Shadow DOM

Question

У меня возникли проблемы с получением JavaScript для правильной работы в теневых элементах DOM, я определяю.Учитывая следующий код:

<template id='testTemplate'>
 <div id='test'>Click to say hi</div>
 <script>
  var elem = document.querySelector('#test');
  elem.addEventListener('click', function(e) {
     alert("Hi there");
  });
</script>
</template>

<div id="testElement">Host text</div>

<script>
  var shadow = document.querySelector('#testElement').createShadowRoot();
  var template = document.querySelector('#testTemplate');
  shadow.appendChild(template.content.cloneNode(true));
</script>

.

Document.QuerySelector возвращает NULL.Если я обернутую его в документе. Расположите его больше не бросает ошибку, но нажатие на div не запускает оповещение, либо.

1. это документ. Расположите правильный способ обрабатывать, когда мой код работает в этом случае?
2. Это правильный способ встроить JavaScript для теневых элементов DOM?

Answer 1

Дерево DOM DOM

Вы должны связать свой EventHandler внутри тега шаблона для #testElement:

var elem = document.querySelector('#testElement');

.

означает оригинальный элемент / Shadowhost. То есть, потому что события из темпов появляются, как будто они возникли ShadowHost.

JavaScript на самом деле не выделяется внутри тенедовых деревьев. См. Например, эта запись в блоге, которая точно покрывает эту тему:

Помните, когда я потратил все это время, объяснив, как теневая DOM CSS была инкапсулирована и защищена от родительского документа и насколько удивительно, что все было? Вы также можете подумать, что JavaScript работает так же, я сделал сначала - но это на самом деле не так. [...] http://robdodson.me/blog/2013/09/02 / Shadow-DOM-JavaScript /

Как объяснение для перестановки событий в Shadowhost автор пишет:

Это потому, что события, исходящие из теневых узлов, должны быть ретарцеты, в противном случае они сломали бы капсуляцию. Если цель мероприятия продолжала указывать на #shadow-text, то кто-то может выкопать внутри нашей тени DOM и начать возиться вещи. http://robdodson.me/blog/2013/09/02 / Shadow-DOM-JavaScript /

Я полагаю, это хорошая идея, чтобы прочитать другие статьи этого блога, так как кажется, что он довольно хорошо покрывает тему.

пользовательские элементы

с пользовательскими элементами HTML у вас есть возможность использовать JavaScript внутри пользовательских элементов HTML, см. Например, Это ответа на Stackoverflow.

В основном вы должны создать полный новый HTML-элемент. Учебное пособие доступно в HTML5Rocks . Я думаю, что это как, например, проект полимера предоставляет его пользовательские события .