How to access shadowroot elements from JS in a LWC component

Question

I have the following HTML in my LWC component-

<template>
<div class="firstdiv">
    <div class="firstinsidefirstdiv fifd">
        1234
    </div>
    <div class="secondinsidefirstdiv sifd">
        5678
    </div>
</div>
<div class="seconddiv">
    <!-- <div data-id="firstinsideseconddiv fisd"> -->
    <div class="firstinsideseconddiv fisd">
        9876
    </div>
    <div class="secondinsideseconddiv sisd">
        5432
    </div>
</div>
<lightning-record-view-form
            record-id="00xxxxxxxxxxxJ"
            object-api-name="Contact">
    <div class="slds-box slds-theme_default">
        <span>inside span</span>
        <lightning-output-field field-name="Name">
        </lightning-output-field>
        <lightning-output-field field-name="Phone">
        </lightning-output-field>
        <lightning-output-field field-name="Email">
        </lightning-output-field>
        <lightning-output-field field-name="Birthdate">
        </lightning-output-field>
        <lightning-output-field field-name="LeadSource">
        </lightning-output-field>
    </div>
</lightning-record-view-form>

and the following JS -

renderedCallback(){
    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');
    console.log(this.template);
    console.log(this.template.childNodes);
    console.log(this.template.childNodes[2].children["0"].children[1].outerHTML);
    console.log(this.template.childNodes[2].children["0"].children[1].shadowRoot);
    console.log(this.template.childNodes[2].children["0"].children[1].shadowRoot.children[0].innerHTML);

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

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

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.