JS（chrome拡張機能）shadow-root内の要素をクリックしたい

実現したいこと

#shadow-root(open)という要素内の<span part="pagination-nav-right" tabindex="0" class="nav item">をクリックさせたい。
イメージ説明

発生している問題・エラーメッセージ

イメージ説明

該当のソースコード

html
1<kat-pagination page="1" items-per-page="10" total-items="10000">
2#shadow-root(open)
3<nav aria-label="ページ分割"> <span part="pagination-nav-left" tabindex="-1" class="nav item end"> <kat-icon class="nav__icon" name="chevron-left" aria-label="後ろに戻る"></kat-icon> </span>
4  <ul class="pages">
5    <!---->
6    <li tabindex="0" class="item page" part="pagination-page-1" data-page="1" aria-current="true"> <span class="page__inner" aria-label="ページ 1"><!---->1<!----></span> </li>
7    <!---->
8    <li tabindex="0" class="item page" part="pagination-page-2" data-page="2"> <span class="page__inner" aria-label="ページ 2"><!---->2<!----></span> </li>
9    <!---->
10    <li tabindex="0" class="item page" part="pagination-page-3" data-page="3"> <span class="page__inner" aria-label="ページ 3"><!---->3<!----></span> </li>
11    <!---->
12    <li tabindex="0" class="item page" part="pagination-page-4" data-page="4"> <span class="page__inner" aria-label="ページ 4"><!---->4<!----></span> </li>
13    <!---->
14    <li tabindex="0" class="item page" part="pagination-page-5" data-page="5"> <span class="page__inner" aria-label="ページ 5"><!---->5<!----></span> </li>
15    <!---->
16    <li class="item ellipsis"><span class="page__inner">...</span></li>
17    <!---->
18    <li tabindex="0" class="item page" part="pagination-page-1000" data-page="1000"> <span class="page__inner" aria-label="ページ 1000"><!---->1000<!----></span> </li>
19    <!---->
20  </ul> <span part="pagination-nav-right" tabindex="0" class="nav item"> <kat-icon class="nav__icon" name="chevron-right" aria-label="前に進む"></kat-icon> </span> </nav>
21
22</kat-pagination>

試したこと

js
1//要素を取得できる
2const iconElements = $('#sc-content-container #myi-container .pagination-container section.pagination-component-wrapper kat-pagination');
3//要素を取得できない
4const iconElements = $('#sc-content-container #myi-container .pagination-container section.pagination-component-wrapper kat-pagination nav');

1つ１つ要素が認識しているのか？調べて行きあと一歩のところでshadow-rootという私の知らない項目に当たってしまいました。

自分なりに調べて下記のコードを完成させたのですがクリックされませんでした。
どうすればクリックされるようになるのか？教えていただけると幸いです。

js
1// 要素を取得
2const paginationNavRight = document.querySelector('span[part="pagination-nav-right"]');
3
4// シャドウルートを取得
5const shadow = paginationNavRight.shadowRoot;
6
7// シャドウルート内の要素を取得
8const katIcon = shadow.querySelector('kat-icon.nav__icon');
9
10// 要素をクリック
11katIcon.click();
12

回答1件

js
1const shadow = paginationNavRight.shadowRoot;

ここでpaginationNavRightがnullなのでエラーが出ているはずです。エラーは必ず質問文に入れましょう。

#shadow-root の中は document.querySelector() では取得できないので、まずは <kat-pagenation> を得る必要があります。なので、

js
1const katPagination = document.querySelector(
2    '#myi-container .pagination-container ' +
3    'section.pagination-component-wrapper kat-pagination');
4const shadow = paginationNavRight.shadowRoot;
5const katIcon = shadow.querySelector('kat-icon.nav__icon');

ではないでしょうか。

投稿2023/03/06 21:57

int32_t

総合スコア18631

回答へのコメント

AMK

2023/03/07 11:50

ご指摘ありがとうございます早速コードを試してみましたが下記のエラーが出ました。 paginationNavRight is not defined コードを見たら paginationNavRight.shadowRoot;が赤の波下線でした。

AMK

2023/03/07 12:01

paginationNavRight.shadowRoot;を pagination-Nav-Right.shadowRoot;に変更しても同様の個所でエラー katPagination.shadowRoot;に変更して const katIcon = shadow.querySelector('kat-icon.nav__icon'); katIcon.click(); とするが、エラーもなくクリックもされない状況です。