폴리머 구성 요소 내부의 요소에 대한 실제 이벤트 keydown 대상을 얻으려면 어떻게해야합니까?

Question

백 스페이스가 뒤로 이동하는 것을 방지하는 코드는 일반적으로 this approach과 같은 형식을 취합니다. 여기서 입력, TextArea 등과 같은 알려진 요소 유형의 작은 세트를 제외하고는 window keydown 이벤트가 백 스페이스에 대해 차단됩니다.

keydown 이벤트 대상 유형이 keydown을 가진 실제 요소가 아닌 사용자 정의 요소의 유형이기 때문에 폴리머 사용자 정의 요소 내부의 요소에 대해서는 제대로 작동하지 않습니다. 각 사용자 정의 요소의 유형이 다릅니다. 이렇게하면 대상 요소 유형에 의한 백 스페이스를 차단할 수 없게됩니다.

폴리머 요소 내에서 키 누르기가있는 실제 요소의 유형을 알 수있는 방법이 있습니까? 아니면 더 좋은 방법이 있습니까?

Answer 1

한 가지 방법은 실제 요소를 가져 오기 위해 맞춤 요소의 shadowdom (및 그 shadowdom)을 파헤치는 것입니다. 이 같은 뭔가 크롬 36에서 작동 :

function getActiveElem(target) {  
    do { 
    if (target.shadowRoot != null) {  
     target = target.shadowRoot.activeElement; 
    } 
    } while(target.shadowRoot != null); 
    return target; 
} 

window.addEventListener("keydown", function(e) { 
    if (e.keyCode == 8) {  
    var preventKeyDown; 

    var d = getActiveElem(e.target); // Get the real active element 

    switch (d.tagName.toUpperCase()) { 
     case 'INPUT': 
     // more smarts here 
     preventKeyDown = false; 
     break;   
     // case TEXTAREA, et al. 
    } 
    // e.preventDefault() if preventKeyDown   
    } 
} 

Answer 2

가능하다면, 그것은 캡슐을 깨는 방지하기 위해 프로젝트를 엔지니어링을 시도하는 것이 좋다. 이것이 섀도우 경계를 넘을 때 event.target이 조정 된 이유입니다.

그러나 event.path 속성은 이벤트를 본 모든 요소의 배열을 포함하며이 문제를 해결할 수있는 이스케이프 해치입니다.