执行 querySelector() 和 querySelectorAll() 的普通 Javascript 代码，包括 shadowroots

Question

我正在尝试编写一个接受两个参数的方法：当前元素的 parentNode 之一，其中许多 childNodes 在其中包含 shadowroots，第二个参数是其中一个 childNodes 的 shadowroots 之一内的元素的 id父节点参数。 我尝试使用 JS 附带的通用 querySelector() 方法来仅使用 id 查找元素，但由于我的元素标签位于 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 个解决方案

解决方案1
1 已采纳 2018-11-07 17:44:22

执行 querySelector() 和 querySelectorAll() 的普通 Javascript 代码，包括 shadowroots

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-11-07 17:44:22

解决方案1
1 已采纳 2018-11-07 17:44:22