Clarification on what this.template.querySelectorAll lets you see in LWCs: want to modify field labels

Question

I have a form rendered using just a lightning-record-form - very cool to get so much done by this single LWC (Lightning Web Component).

But I'm trying to replace the labels with the inline help text after rendering (as we want more detailed prompts and labels can only be 40 characters whereas the help text can be 255 characters), using this as the first try:

renderedCallback() {
    this.template.querySelectorAll('.slds-form-element__label').forEach(element => {
        element.innerHTML = 'New label TBD';
    });
}

but the querySelectorAll does not match the labels created by the lightning-record-form.

One of the answers to this post Lightning Web Component Sticky Header - Not able to global do querySelectorAll mentions "you can only select the elements which are created by you in current component". Not too sure what that means, but what I see is that I can't find in the DOM elements created by platform LWC. Please confirm that that is expected behavior.

Any suggestions about different approaches to accomplish this appreciated too.

Answer 1

Using record edit form small POC below:

<template>
    <lightning-record-edit-form record-id="003XXXXXXXXXXXXXXX"
       object-api-name="Contact">
        <lightning-messages>
        </lightning-messages>
        <span>Custom label value</span>
        <lightning-input-field field-name="Email" variant="label-hidden">
        </lightning-input-field>
        <lightning-button
            class="slds-m-top_small"
            variant="brand"
            type="submit"
            name="update"
            label="Update">
        </lightning-button>
    </lightning-record-edit-form>
</template>

Basically lightning input field has a variant label hidden, we use that to hide the label of input field and put the custom label you want to.

In our case the fields to show were in a for loop reading from metadata, we read from there and whereever we had to override label we used a boolean to override and hide the label and expose custom label using a span/div tag.

Answer 2

Your theory is correct.

When you use a component tag (whether custom or by LWC), it creates a Shadow DOM for its internal structure. This shadow DOM is not something that you can access or modify via DOM manipulation and this is by design. In your case, lightning-record-form is the tag and the label tags are part of its internal shadow DOM.

You can read more about Shadow DOM here where the Access Elements section talks more about what I said.