Retrieving div attribute within a lightning input element

Question

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="" ..>
 <div>
   <input name="field"/>
 </div>
</lightning-input>

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?

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.