Scenario: I have a LWC with a lightning-button
which calls an action in the JS controller. Within the JS controller, I am trying to target the button element and update it's innerHTML and/or update it to disabled=true.
Per the Salesforce LWC Documentation "Access Elements the Component Owns":
To access elements rendered by a component, use the template property.
this.template.querySelector();
this.template.querySelectorAll();
and per How to migrate aura:id to Lightning Web Components data-id acts as the LWC equivilent of aura:id from Aura components.
So, following that guidance, I added a data-id to a lightning-button in my markup:
<template if:true={showSendSignature}>
<lightning-button name="Send for Signature" data-id="adobeSignBtn" variant="success" label="Send for Signature" onclick={adobeSendForSignature} ></lightning-button>
</template>
In my JavaScript, I then do:
const adobeButton = this.template.querySelector('[data-id="adobeSignBtn"]');
console.log(adobeButton);
When I inspect the page, I notice that the data-id is actually on a parent element to the button itself, rather than on the button element:
<lightning-button c-alphacreateorderform_alphacreateorderform="" data-id="adobeSignBtn"
<button name="Send for Signature" type="button" class="slds-button slds-button_success slds-button_first">Send for Signature</button>
</lightning-button>
In console, adobeButton returns SecureElement: [object HTMLElement]
When I do console.log(adobeButton.childNodes)
, I get back SecureNodeList: [object NodeList]
However, when I do adobeButton.childNodes[0]
, I get undefined
Question: How do I correctly access this button in a LWC JS controller?
event.target
?event.target.nodeName
returnsLIGHTNING-BUTTON
,event.target.querySelector('button')
returns null,event.target.childNodes.length
andevent.target.children.length
return 0