使用javascript获取shadow root内的html元素

Question

我有示例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

Answer 1

您必须shadow-root先导航到然后才能获取它：

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

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