Como os eventos Shadow DOM de <conteúdo> são direcionados?

Question

Jun 30, 2014, 12:22 AM

Como os eventos Shadow DOM de <conteúdo> são direcionados?

Estou tentando entender como são os eventos originados no DOM leve quando recebidos no DOM sombra por meio de um<content> elemento. Estou lendo oRascunho do DOM DOM W3C, e eu não o entendo completamente, mas parece que os eventos devem ser "redirecionados" do ponto de vista do anexo EventListener.

Nos casos em que o caminho do evento está em várias árvores de nós, as informações do evento sobre o destino do evento são ajustadas para manter o encapsulamento. O redirecionamento de evento é um processo de calcular destinos relativos para cada ancestral do nó no qual o evento é despachado. Um destino relativo é um nó que representa com mais precisão o destino de um evento despachado em um determinado ancestral enquanto mantém o encapsulamento.

e

No momento do envio do evento:

Os atributos Event target e currentTarget devem retornar o destino relativo para o nó no qual os listeners de eventos são chamados

Então, aqui está um simples elemento personalizado do Polymer que apenas coloca seus filhos em um contêiner e adiciona um clique EventListener ao contêiner (no DOM da sombra). Nesse caso, a criança é um botão.

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
  </head>
  <body unresolved>
    <polymer-element name="foo-bar">
      <template>
        <div id="internal-container" style="background-color:red; width:100%;">
          <content></content>
        </div>
      </template>
      <script>
       Polymer("foo-bar", {
         clickHandler: function(event) {
           console.log(event);
           var element = event.target;
           while (element) {
             console.log(element.tagName, element.id);
             element = element.parentElement;
           }
         },

         ready: function() {
           this.shadowRoot.querySelector('#internal-container').addEventListener('click', this.clickHandler);
         }
       });
      </script>
    </polymer-element>

    <foo-bar id="custom-element">
      <button>Click me</button>
    </foo-bar>
  </body>
</html>

Quando executo isso no Chrome 38.0.2075.0 canary, quando clico no botão, obtenho:

MouseEvent {dataTransfer: null, toElement: button, fromElement: null, y: 19, x: 53…}altKey: falsebubbles: truebutton: 0cancelBubble: falsecancelable: truecharCode: 0clientX: 53clientY: 19clipboardData: undefinedctrlKey: falsecurrentTarget: nulldataTransfer: nulldefaultPrevented: falsedetail: 1eventPhase: 0fromElement: nullkeyCode: 0layerX: 53layerY: 19metaKey: falsemovementX: 0movementY: 0offsetX: 45offsetY: 10pageX: 53pageY: 19path: NodeList[0]relatedTarget: nullreturnValue: truescreenX: 472screenY: 113shiftKey: falsesrcElement: buttontarget: buttontimeStamp: 1404078533176toElement: buttontype: "click"view: WindowwebkitMovementX: 0webkitMovementY: 0which: 1x: 53y: 19__proto__: MouseEvent test.html:17
BUTTON  test.html:20
FOO-BAR custom-element test.html:20
BODY  test.html:20
HTML  test.html:20

e quando clico no contêiner, recebo:

MouseEvent {dataTransfer: null, toElement: div#internal-container, fromElement: null, y: 15, x: 82…} test.html:17
DIV internal-container test.html:20

Portanto, recebo um destino de evento no DOM claro ou sombreado, dependendo de qual DOM ofonte estava o elemento. Eu esperava obter um destino do DOM sombra nos dois casos, porque é aí que o EventListener está anexado. Minhas perguntas são:

É assim que deve funcionar, eEm caso afirmativo, existe uma maneira alternativa de obter eventos que borbulham do DOM leve redirecionados para o DOM sombra?

Caso alguém queira perguntar: "O que você está tentando fazer?", Não estou tentando fazer nada especificamente além de entender o comportamento.