폴리머 크로스 브라우저 이벤트

Question

이 권리를 읽고 있습니까? Shady DOM에 이벤트 재 타겟팅이없는 경우 재 타겟팅이 필요하고 ShadowDOM (iPhone이라고도 함)이없는 브라우저를 지원한다면 수동으로해야합니다. https://www.polymer-project.org/1.0/docs/devguide/events#retargeting

내가 해결하려고하는 문제는 Polymer 고객 요소 간의 이벤트 통신입니다. 일부 요소는 이벤트의 소비자가되고 다른 요소는 제작자가되기를 원합니다. 그러나 사파리와 같은 브라우저는 우리가 지원하는 목록에 있으며, 나는 그것이 그늘진 DOM을 사용한다는 것을 의미한다고 믿는다.

그래서 코드 예는 다음과 같이 뭔가를 갈 것 :

<wut-action async remote="false" file="/actions/saveInventory.js"> 
    <wut-button class="saveInventory"> 
    </wut-button> 
</wut-action> 

내가 탭에 doAction 이벤트를 생성하는 <wut-button> 사용자 정의 요소를 만들려고합니다. 그리고 <wut-action>은 doAction 이벤트 (수신기)를 사용합니다. 저는 버블 링 때문에 위의 그림과 같이 구성해야합니다.

이 디자인이 작동하지 않는다는 문서를 읽고 나서 걱정됩니다. 생각?

Answer 1

필자의 테스트에서, 분산 어린이의 이벤트 수신은 Shady and Shadow DOM에서 지원된다. 귀하의 디자인은 여러 브라우저에서 작동합니다.

Polymer({ 
    is: 'wut-action', 
    listeners: { 
    'x-event': '_onEvent' 
    }, 
    _onEvent: function(e) { 
    console.log('event', e.detail); 
    } 
}); 

codepen

:이 같은 해당 이벤트에, 크롬 54, 파이어 폭스 (49)와 사파리 wut-button 화재 "X-이벤트"라는 이름의 이벤트를 가정하면 10

에 wut-action 수 listen 이것을 확인