I have the following HTML in my LWC component-

<div class="firstdiv">
    <div class="firstinsidefirstdiv fifd">
    <div class="secondinsidefirstdiv sifd">
<div class="seconddiv">
    <!-- <div data-id="firstinsideseconddiv fisd"> -->
    <div class="firstinsideseconddiv fisd">
    <div class="secondinsideseconddiv sisd">
    <div class="slds-box slds-theme_default">
        <span>inside span</span>
        <lightning-output-field field-name="Name">
        <lightning-output-field field-name="Phone">
        <lightning-output-field field-name="Email">
        <lightning-output-field field-name="Birthdate">
        <lightning-output-field field-name="LeadSource">

and the following JS -

    let div = this.template.querySelectorAll('.seconddiv>.firstinsideseconddiv');
    console.log("inside renderedCallback");
    div.forEach(element => {
       console.log("text content " + element.textContent);
       console.log("inner html " + element.innerHTML);

    console.log('second console');
    div = this.template.querySelectorAll('lightning-output-field');

I am unable to access the shadowRoot element even though it shows up in the dom in chrome- enter image description here Also when i try to print the innerText of "" nothing is printed even though it has a value- enter image description here

Please let me know how I can access the shadowRoot of an element and why the innerText is not being printed.

  • You forget to add JS code and the please explain your problem too Feb 8, 2020 at 10:07
  • I have updated the question, my net was slow so somehow only half the question got published. Feb 8, 2020 at 10:14
  • 1
    This question is a Y in an X-Y Problem situation. Yes, you can see the "innerText" of components in the developer console, because everything can be seen there. However, Aura/LWC/Lightning has a concept of the Locker API, which, among other things, prevents code in package "A" from accessing package "B" except in narrowly defined channels. This is a security feature, and it limits your script's access to other scripts. All that said, what is your "X"? What are you trying to achieve?
    – sfdcfox
    Feb 8, 2020 at 15:42
  • @sfdcfox I am trying to access the div and span elements which are created by salesforce when the tag <lightning-output-field field-name="Name"> is rendered. Also I am trying to see if I can access the child elements tags from the parent component. And trying to see how can the shadoowRoot elements be accessed in JS. Feb 9, 2020 at 12:46

1 Answer 1


You can't access information you don't have access to. This is a security feature, and a core principle of Web Components in general (allowing components to protect their contents).

I wrote a Playground example that demonstrates this. As I stated in my comment, you won't be able to access the shadow root of the the lightning namespace components and its contents. You can only access information that is not already hidden from your script.

Whatever you're attempting to do (your "X"), this is an X-Y Problem. You will need to find a different solution ("Y") to solve your "X" problem.

  • 1
    Thanks SFDCfox , there is no X problem , I just wanted to see whether I could or not. Thanks for your time, keep rocking. Feb 10, 2020 at 4:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .