0

This might be a simple one, I'm trying to figure out how to reach the class "sn-inbox"

With the below code I could reach the child node of first shadow-root, but how do I get to the next Shadow-root, I should be then able to easily reach the class.

let Acceptbtn = $("[slot=primary-content-area")[4]?.shadowRoot?.childNodes[0];
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
Sharon
  • 15
  • 4

1 Answers1

0

As far as I can tell from your screenshot, <sn-inbox> is in the lightDOM of <sn-ux-content-option> (which has shadowDOM) And (I guess) is slotted to a <slot>?

You can use the slotChange Event to capture when content is slotted

OR access the DOM element in lightDOM

let Acceptbtn = $("[slot=primary-content-area")[4]?.querySelector("sn-inbox");

For in-depth slotted info see: ::slotted CSS selector for nested children in shadowDOM slot

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
  • I tried the above code but gets null value. I'm new to this slotted concept. As my screenshot is removed from post, not sure if I will get anymore help here. – Sharon Jun 26 '21 at 10:03
  • I did not remove your screenshot; I changed the link to another site to an inline image. You probably have to get your selector right; I pasted it onto your original jQuery selector (I don't know jQuery syntax anymore). Learning takes time, takes a lot of trial and error. But the answer is understanding "lightDOM" and (slotted) "shadowDOM" – Danny '365CSI' Engelman Jun 26 '21 at 10:29
  • Thanks for that. I'm new to this shadowdom. I just want to know how to get into – Sharon Jun 26 '21 at 16:19
  • That element is in lightdom – Danny '365CSI' Engelman Jun 26 '21 at 19:34