Question

我正在尝试编写一种方法，该方法包含两个参数：当前元素的parentNode之一，其中许多具有影子根的childNodes，第二个参数是其中一个的影子根之一内的元素的ID。此parentNode参数的childNodes。我试图使用JS附带的通用querySelector（）方法来单独使用id来查找元素，但是由于我的element标签位于shadowroot中，因此无法使用。由于这个原因，我编写了或多或少经过硬编码的代码，这些代码通过它们的标记名遍历DOM树，因此提出了编写处理匹配的更具动态性的方法的想法。这是我正在处理的html示例，使用了一堆自定义的Web组件标签（因此，为什么是shadowroots）：

<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>，而我要查找的元素的ID为tr2，我该如何编写一种方法来处理呢？

Answer 1

您必须创建一个解析器，该解析器将递归检查DOM：

对于每个节点：

如果存在Shadow DOM（shadowRoot而不是null），请解析Shadow树。
或者解析子DOM树。

如果您使用<slot>，也会寻找分布式节点，但是在您的问题中并没有询问...

可以执行querySelector（）和querySelectorAll（）功能的纯Javascript代码，包括shadowroots

1 个答案: