Q&A
実現したいこと
#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つ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
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/07 11:50
2023/03/07 12:01
2023/03/07 13:00
2023/03/07 15:25