Как нацелены события Shadow DOM из-под <content>?
Я пытаюсь понять, как выглядят события, которые происходят в светлом DOM при получении в теневом DOM через<content> элемент. Я читаюТень DOM W3C Draftи я не совсем понимаю, но звучит так, как будто события должны быть «перенаправлены» с точки зрения вложения EventListener.
В случаях, когда путь к событию проходит через несколько деревьев узлов, информация о событии о цели события корректируется для обеспечения инкапсуляции. Ретаргетинг события - это процесс вычисления относительных целей для каждого предка узла, в который отправляется событие. Относительная цель - это узел, который наиболее точно представляет цель отправленного события у данного предка при сохранении инкапсуляции.
а также
Во время отправки события:
Атрибуты Event target и currentTarget должны возвращать относительную цель для узла, на котором вызываются прослушиватели событий.Итак, вот простой пользовательский элемент Polymer, который просто помещает его дочерние элементы в контейнер и добавляет в контейнер щелчок EventListener (в теневом DOM). В этом случае ребенок - кнопка.
<!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>
Когда я запускаю это на Chrome 38.0.2075.0 канарейка, когда я нажимаю на кнопку, я получаю:
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
и когда я нажимаю на контейнер, я получаю:
MouseEvent {dataTransfer: null, toElement: div#internal-container, fromElement: null, y: 15, x: 82…} test.html:17
DIV internal-container test.html:20
Таким образом, я получаю цель события в DOM света или тени, в зависимости от того, какой DOMисточник элемент был в. Я ожидал получить цель от теневого DOM в обоих случаях, потому что именно там прикреплен EventListener. Мои вопросы:
Это так, как это должно работать, иЕсли это так, есть ли альтернативный способ получить события, которые всплывают от светлого DOM, перенаправленного на теневой DOM?В случае, если кто-то хочет спросить: «Что вы пытаетесь сделать?», Я не пытаюсь делать что-то конкретно, кроме понимания поведения.