Shadow DOM 모범 사례 내의 JavaScript

Question

내가 정의하고 있는 Shadow DOM 요소 내에서 JavaScript를 제대로 실행하는 데 문제가 있습니다.다음 코드가 주어지면:

<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을 반환합니다.document.onload로 래핑하면 더 이상 오류가 발생하지 않지만 div를 클릭해도 경고가 실행되지 않습니다.

1. 이 경우 내 코드가 실행될 때 document.onload를 처리하는 적절한 방법이 있습니까?
2. 이것이 Shadow DOM 요소에 자바스크립트를 삽입하는 적절한 방법입니까?

Answer 1

섀도우 DOM 트리

템플릿 태그 내부에 eventHandler를 바인딩해야 합니다. #testElement:

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

원래 요소/ShadowHost에 대한 의미입니다.즉, ShadowElements의 이벤트는 마치 ShadowHost에서 시작된 것처럼 나타나기 때문입니다.

Javascript는 실제로 ShadowDOM-Trees 내부에서 범위가 지정되지 않습니다.예를 들어 해당 주제를 정확히 다루는 다음 블로그 항목을 참조하세요.

Shadow DOM CSS가 어떻게 캡슐화되고 상위 문서로부터 보호되는지, 그리고 그 모든 것이 얼마나 멋진지 설명하는 데 모든 시간을 소비했던 것을 기억하십니까?처음에는 JavaScript가 동일한 방식으로 작동한다고 생각할 수도 있지만 실제로는 그렇지 않습니다.[...] http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

이벤트를 ShadowHost로 재배치하는 설명으로 저자는 다음과 같이 썼습니다.

이 때문입니다 섀도우 노드에서 오는 이벤트는 대상을 변경해야 합니다. 그렇지 않으면 캡슐화가 중단됩니다. 이벤트 대상이 계속해서 가리키는 경우 #shadow-text 그러면 누구나 Shadow DOM 내부를 파헤쳐 일을 망칠 수 있습니다. http://robdodson.me/blog/2013/09/02/shadow-dom-javascript/

이 블로그의 다른 기사도 해당 주제를 꽤 잘 다루고 있는 것 같으므로 읽어 보는 것도 좋은 생각이라고 생각합니다.

맞춤 요소

사용자 정의 HTML 요소를 사용하면 사용자 정의 HTML 요소 내에서 Javascript를 사용할 수 있습니다. 예를 참조하세요. 이 답변 스택오버플로우에서.

기본적으로 완전히 새로운 HTML 요소를 생성해야 합니다.튜토리얼을 이용할 수 있습니다. html5rocks에서.나는 이것이 예를 들어 Polymer 프로젝트가 제공하는 방법이라고 생각합니다. 맞춤 이벤트.