如何根据addEventListener上的click事件通过父元素选择shadow dom中的元素？答案

【问题标题】：How can I select elements in shadow dom through the parent element based on the click event on addEventListener?如何根据addEventListener上的click事件通过父元素选择shadow dom中的元素？
【发布时间】：2020-11-22 02:11:31
【问题描述】：

我有一个 Web 组件，如下所示：

文件：download-bar.js（网络组件）

class DownloadBar extends HTMLElement {

    constructor() {
        super();
        this.shadowDOM = this.attachShadow({mode: 'open'});        
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowDOM.innerHTML = `
            <div class="favicon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
                <span>Download File</span>
            </div>
            <div class="dropdown">
                <a href="" id="xlsx">XLSX</a>
                <a href="" id="pdf">PDF</a>
                <a href="" id="jpeg">JPEG</a>
            </div>
        `;
    }
}

customElements.define('download-bar', DownloadBar);

然后我在父阴影元素 DOM 上选择元素并监听 click 事件，如下所示：

文件：download-bar.js

import '../component/download-bar.js';

const downloadElement = document.querySelector('download-bar');

downloadElement.addEventListener('click', (e) => {

    // I would like this:
    if (e.target.classList.contains('favicon')) {
        console.log('True')
    }
})

如果从 "(e)" 获取的事件具有特定的类或 id，例如 class= "favicon"，我如何使用 shadow dom 从自定义元素中获取子元素？

【问题讨论】：

标签： javascript html web-component shadow-dom

【解决方案1】：

你需要使用event.composedPath()

如果您使用Custom Events，请务必设置composed:true 选项，以便您的活动爆发 shadowDom

顺便说一句

你可以替换所有这些：

    constructor() {
        super();
        this.shadowDOM = this.attachShadow({mode: 'open'});        
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowDOM.innerHTML = ...

与：

    connectedCallback() {
        this.attachShadow({mode: 'open'}).innerHTML = ...
    }

您在constructor 中没有做任何特别的事情；所以不要定义它，让元素从 HTMLElement 运行constructor。

attachShadow() 设置并返回this.shadowRoot

只有当您在 DOM 中移动/附加/拖动自定义元素时，connectedCallback 才会再次运行，您可能希望将创建 shadowDOM 拆分为自己的 constructor

另见：https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/

【讨论】：