Как я могу выбрать элементы в теневом домене через родительский элемент на основе события щелчка в addEventListener? - PullRequest
Новая
       73

Как я могу выбрать элементы в теневом домене через родительский элемент на основе события щелчка в addEventListener?

0 голосов
/ 01 августа 2020

У меня есть веб-компонент, например:

File: 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 и прослушайте событие щелчка, например:

File: 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')
    }
})

как я могу получить дочерние элементы из пользовательских элементов с помощью shadow dom, если событие из "(e)", которое получено, имеет определенный класс или идентификатор, например class = "favicon"?

1 Ответ

1 голос
/ 01 августа 2020

Вам необходимо использовать event.composedPath()

Если вы используете Пользовательские события , обязательно установите параметр composed:true, чтобы ваше событие вырвалось из shadowDom

BTW

Вы можете заменить все это: 

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

    connectedCallback() {
        this.render();
    }

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

на: 

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

Вы не делаете ничего особенного в constructor; поэтому не определяйте его и позвольте элементу запускать constructor из HTMLElement.

attachShadow() устанавливает и возвращает this.shadowRoot

Только когда вы перемещаете / добавляете / перетаскиваете Custom Элементы в DOM снова запустят connectedCallback, и вы можете захотеть разделить создание shadowDOM на его собственный constructor

...