Получить html элементов внутри тени root используя javascript

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');

Answer 2

Вы можете использовать QuerySelector для получения элемента внутри тени Root

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