Простой код Javascript, который делает то, что делают querySelector () и querySelectorAll (), включая shadowroots - PullRequest
Новая
       24

Простой код Javascript, который делает то, что делают querySelector () и querySelectorAll (), включая shadowroots

0 голосов
/ 07 ноября 2018

Я пытаюсь написать метод, который принимает два параметра: один из parentNode текущего элемента, где много дочерних узлов с корнями тени внутри него, а второй параметр является идентификатором элемента в одном из корней тени одного из childNode этого родительского узла param. Я пытался использовать универсальные методы querySelector (), с которыми поставляется JS, чтобы найти элемент, используя только идентификатор, но он не сработал из-за того, что мои теги элементов были внутри shadowroot. По этой причине у меня был более или менее жесткий код, который перебирает дерево DOM по имени тега, поэтому возникла идея написать более динамический метод, который обрабатывает сопоставление. Вот HTML-пример того, с чем я имею дело, используя набор настраиваемых тегов веб-компонентов (поэтому и корни теней): 

<body>
<my-app>
    <main id="main">
        <my-app-pub>
            <section>
                <my-app-workpackage id="wp">
                    <my-table id="mytable1" data={...}>
                        #shadow-root (open)
                            <style></style>
                            <table>
                                <thead></thead>
                                <tbody>
                                    <tr id="tr1"></tr>
                                    <tr id="tr2"></tr>
                                    <tr id="tr3"></tr>
                                </tbody>
                            </table>
                    </my-table>

                    <my-table id="mytable2" data={...}>
                        #shadow-root (open)
                            <style></style>
                            <table>
                                <thead></thead>
                                <tbody>
                                    <tr id="tr4"></tr>
                                    <tr id="tr5"></tr>
                                    <tr id="tr6"></tr>
                                </tbody>
                            </table>
                    </my-table>
                </my-app-workpackage>
            </section>
        </my-app-pub>
    </main>
</my-app>

Если у меня есть переменная с родительским элементом <my-app-workpackage> и идентификатор элемента, который я хочу найти как tr2, как мне написать метод для обработки этого?

1 Ответ

0 голосов
/ 07 ноября 2018

Вы должны создать парсер, который будет рекурсивно проверять DOM:

Для каждого узла:

  1. Если есть Shadow DOM (shadowRoot not null), проанализируйте Shadow tree.
  2. Или же разобрать дерево DOM детей.

Если вы используете <slot>, вам придется искать распределенные узлы, но в вашем вопросе это не задается ...

...