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.
querySelectorAll
matches no elements so the replacement values are moot.