웹 구성 요소의 캡슐화 및 그림자 DOM 요소에 대한 이벤트 바인딩

Question

Polymer를 사용하기 전에 자세한 내용으로 웹 구성 요소를 배우기 시작했습니다.

두 개의 <button> 및 하나의 <input type="text"> 요소를 사용하여 스핀 단추를 만드는 간단한 예제를 작성했습니다.

<template id="tplSpinButton"> 
    <style type="text/css"> 
    .spin-button > * { 
     display: inline; 
     text-align: center; 
     margin: 0; 
     float: left; 
    } 
    </style> 
    <div class="spin-button"> 
    <content select=".up-spin-button"></content> 
    <content select=".display-spin-button"></content> 
    <content select=".down-spin-button"></content> 
    </div> 
</template> 

그리고 호스트 요소과 같습니다 :

템플릿은 내가 알고 온

<article> 
    <spin-button> 
    <button class="up-spin-button">&#43;</button> 
    <input class="display-spin-button" type="text" value="0" size="2"/> 
    <button class="down-spin-button">&#45;</button> 
    </spin-button> 
</article> 

와 JS 코드를 실험하는 동안

var template = document.querySelector('#tplSpinButton'); 
var host = document.querySelector('article spin-button'); 
var articleShadowRoot = host.createShadowRoot(); 
articleShadowRoot.appendChild(document.importNode(template.content,true)); 

var counterBox = document.querySelector('.display-spin-button'); 
var upHandler = document.querySelector('.up-spin-button'); 
var downHandler = document.querySelector('.down-spin-button'); 
upHandler.addEventListener('click', function(e){ 
    var count = parseInt(counterBox.value); 
    counterBox.value = count + 1; 
}, false); 

downHandler.addEventListener('click', function(e){ 
    var count = parseInt(counterBox.value); 
    counterBox.value = count - 1; 
}, false); 

document.registerElement('spin-button', { 
    prototype: Object.create(HTMLElement.prototype) 
}); 

그 JS/코드 그림자 DOM에서 <style>이 작동하지 않습니다. <template>의 일부입니다.위 예제에서 삽입 점 (<content>)을 추가 한 다음 분산 된 요소에 이벤트 수신기를 연결합니다.

• 이벤트 수신기 구현을 캡슐화하는 방법이 있습니까?
• 그림자 돔으로 컨트롤과 요소를 이동 한 다음 어떤 방식 으로든 이벤트 수신기를 연결하는 방법이 있습니까?

Answer 1

이벤트 리스너 구현을 캡슐화하는 방법은 없나요?

요소 프로토 타입의 일부로 만들고 lifecycle callback 안에 구성 할 수 있습니다.

그림자 돔으로 컨트롤과 요소를 이동 한 다음 어떤 방식 으로든 이벤트 수신기를 연결하는 방법이 있습니까?

콘텐츠 태그에 투영되는 요소를 선택하려면 getDistributedNodes을 사용하십시오.

두 개념을 모두 보여주는 a jsbin입니다. 희망이 도움이됩니다!