0

When tracing down a very long nested shadowdom I found it stopped somewhere as follows:

enter image description here

It returns null at the highlighted part, is there anything I need to tweak?

Thanks.

Jepsenwan
  • 75
  • 2
  • 10
  • 1
    Not sure what you mean by "tracing down" and "it stopped". Can you make a [mcve], please? – Bergi Jan 10 '22 at 13:54
  • Thanks. I am walking though the deeply nested shadow-dom using queryselector. As you could see in the first html tags tree, it has which is assigned to the layout[1] behind the second prompt> , so in the console, I am trying to use the layout[1] variable to get the next tag force-record-layout-row content using its class names. But it returns null... – Jepsenwan Jan 10 '22 at 13:55
  • 1
    It's not actually clear what your problem is, please could you clarify what the error is. If it's because your querySelector isn't working - do you have all of those elements in your shadow dom root? – Pete Jan 10 '22 at 13:57
  • Sorry let me rephrase, the ... content was returned by the below code: layout[1].shadowRoot.querySelector(".test-id__section-content.slds-section__content.section__content.slds-p-horizontal_small div.slds-form slot") , so I would like to get the -wrapped part html by using the yellow part selectors, but it returned null. – Jepsenwan Jan 10 '22 at 14:02
  • ``queryselector`` doesn't work that way, it can't access content in (or reflected in) shadowDOM. You have a long read ahead: https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668 . – Danny '365CSI' Engelman Jan 10 '22 at 20:10
  • @Danny'365CSI'Engelman Thanks. That really looks long, and it seems to be only talking about how to style CSS for the nested element in slot. But did not say how to locate it.. Thanks. – Jepsenwan Jan 11 '22 at 06:57
  • It explains slotted content is in lightdom, so that is where to get it – Danny '365CSI' Engelman Jan 11 '22 at 07:20
  • Thanks. I found to access light DOM simply call this.querySelector(''), but it returns null as shown in my question... – Jepsenwan Jan 11 '22 at 08:05
  • Your screenshot isn't enough to see where you go wrong. Add formatted code, create an SO snippet (the [< >] button in the SO editor) or link to a JSFiddle or CodePen. Could it be you are querying lightDOM when it hasn't been parsed yet? See: https://stackoverflow.com/questions/61971919/wait-for-element-upgrade-in-connectedcallback-firefox-and-chromium-differences – Danny '365CSI' Engelman Jan 11 '22 at 09:47

0 Answers0