使用javascript在shadow root中获取html元素答案

【问题标题】：Get html elements inside shadow root using javascript使用javascript在shadow root中获取html元素
【发布时间】：2020-11-26 08:06:20
【问题描述】：

我有示例 HTML 代码：

<section class="search-module">
    #shadow-root (open)
        <div class="app">
            <div class="title">Product Title</div>
        </div>
</section>

通过这段代码我可以访问shadow root元素父容器：

var searchModule = document.getElementsByClassName("search-module").item(0);

但无法使用此命令获取 shadow root 容器内的元素：

searchModule.getElementsByClassName("title") // undefined

【问题讨论】：

线路：searchModule.getElementsByClassName("title") 运行良好。检查 JSBin

标签： javascript html dom html-parsing

【解决方案1】：

您可以使用 QuerySelector 获取 ShadowRoot 中的元素

var searchModule = document.getElementsByClassName("search-module").item(0);
searchModule.querySelector('.title')

【讨论】：

【解决方案2】：

你必须先导航到shadow-root然后你才能得到它：

const searchModule = document.querySelector('.search-module');
const searchModuleRoot = searchModule && searchModule.shadowRoot;

const title = searchModuleRoot.querySelector('.title');

【讨论】：