I have a parent component, which contains 2 re-usable components. I am not sure how to fetch them in parent.

Parent Component

<lightning-card title="Case Reason">
    <div class="slds-form slds-form_stacked slds-var-m-around_xx-large">
            label="Case Reason"
            label="Case Resolution"
        <lightning-button label="Clear" onclick={handleClear}></lightning-button>
        <lightning-button variant="brand" label="Submit" onclick={handleSubmit}></lightning-button>

Parent controller

handleReasonChange(event) {
    // Call Apex endpoint to search for records and pass results to the lookup
        .then((results) => {
        .catch((error) => {
            this.notifyUser('Lookup Error', 'An error occured while searching with the lookup field.', 'error');
            // eslint-disable-next-line no-console
            console.error('Lookup error', JSON.stringify(error));
            this.errors = [error];

If I fetch child component using this.template.querySelector('c-cs_autocomplete'), the component could be one of child components randomly.

Is there a way to fetch specific child component?

2 Answers 2


When you have multiple child components called inside a parent and you want to query a specific component, you can do it via various ways:-

  1. using HTML data-* Attribute

let's say a parent is having two input fields. Assign different data-id to both of them

    <lightning-input type="text" label="Enter Product Number" data-id="nine digit product number" >
    <lightning-input type="text" label="Enter Product Number" data-id="ten digit product number" >

In javascript, You can query a particular input field as below:-

this.template.querySelector('lightning-input[data-id="ten digit product number"]');
  1. using different class name

     <lightning-input type="text" label="Enter Product Number" class="field1">
     <lightning-input type="text" label="Enter Product Number" class="field2">

In javascript, You can query a particular input field as below:-

  1. You can also use querySelectorAll to access all child elements and do a filter based on some public property of the child.
this.template.querySelectorAll('lightning-input').forEach(element => {
     if (element.label === 'some value') {
            //do something
  • 1
    thanks @sanket...i would go the data-id way :)
    – ipradhansk
    Commented Aug 18, 2020 at 11:31

you can use data-id

 label="Case Resolution">

you need to specify your data-id.


You must log in to answer this question.

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