I'm retrieving all lightning-input fields on my page using querySelectorAll('lightning-input') and this is what is being returned :

(There is more than 1 input field on my page and this is a simplified example)

<lightning-input class="" ..>
   <input name="field"/>

My thought process was to grab the children of the lightning-input which in this case should 1 child (div). Once I get to the div, I would get it's children (only 1 - input field) so I'd be where I want to be and get the name attribute.

const allInputs = Array.from(this.template.querySelectorAll("lightning-input");
const result = Array.map((element) => {
   console.log(element.children.length) //returns 0, shouldn't it be 1?

I want to get the value of the name attribute on the input tag which lies within a div tag. How can I do this?

  • why are you using querySelectorAll for 1 element?
    – glls
    May 12, 2021 at 17:37
  • This is a simplified example. In reality, my page contains many lightning-input fields May 12, 2021 at 17:41
  • i'm not asking about the lighting input, but the method for querying dom elements
    – glls
    May 12, 2021 at 17:53
  • Yeah, I know. My page contains multiple of lightning-input fields which is why I'm using the querySelectorAll function May 12, 2021 at 17:56
  • in that case, i'm not sure what your quesiton is, since querySelectorAll returns an array of DOM elements, what have yout tried exactly to get the name attribute
    – glls
    May 12, 2021 at 18:05

1 Answer 1


lightning-input is an LWC - which means its internal markup is hidden from you.

You will be able to retrieve all the various inputs in your querySelectorAll call, but you won't be able to get anything internal.

Of course, you'll be able to access anything that is exposed via the API on any of the components, but that's all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.