Почему теневые DOM-события в setTimeout переориентированы? - PullRequest
Новая
       81

Почему теневые DOM-события в setTimeout переориентированы?

0 голосов
/ 29 октября 2019

Пользовательский элемент с теневым DOM, который прослушивает события на себе, будет (может?) Перенаправлять свои события, если эти события читаются из setTimeout: 

<script>
    class Widget extends HTMLElement {
        constructor() {
            super();
            this.attachShadowDom();
            this.registerListener();
        }
        attachShadowDom() {
            let shadow = this.attachShadow({mode: 'open'});
            let templateClone = document.querySelector("#widget-template").content.cloneNode(true);
            shadow.appendChild(templateClone);
        }
        registerListener() {
            this.shadowRoot.querySelector("#my-input").addEventListener("input", (event) => {
                console.log(event.target);
                setTimeout(() => console.log(event.target), 0);
            });
        }
    }
    document.addEventListener("DOMContentLoaded", () => {
        customElements.define("my-widget", Widget);
    });
</script>

<html>
    <my-widget></my-widget>
</html>

<template id="widget-template">
    <input type="text" id="my-input">
</template>

Каждый символ, введенный вэлемент input, указанный выше, регистрирует на консоли две отдельные цели событий: элемент input и элемент my-widget. Мне интересно, если это по замыслу?

1 Ответ

2 голосов
/ 30 октября 2019

Да, это специально.

Как объяснено в javascript.info :

Идея теневого дерева заключается в инкапсуляции внутренних деталей реализациикомпонент [...]

Итак, чтобы сохранить подробности, браузер перенаправляет событие.

И из Google презентация Shadow DOM :

Когда event всплывает из теневого DOM, его цель настраивается для поддержания инкапсуляции, которую обеспечивает теневой DOM. То есть события перенаправляются так, чтобы выглядеть так, как будто они произошли от компонента, а не от внутренних элементов в вашей теневой DOM.

...