Accessing Child Components in lightning-input DOM element

Question

I am trying to populate the field that is nested within an aura component using DOM elements.

I am able to access the parent with document.getElementsByTagName; however, I cannot access the child component that is nested in the parent lightning-input. After looking into the documentation, it mentions that we cannot use document or window properties to query these nested DOM elements, but instead, we need to use the template as the root target.

Reference
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_dom_work

Is it possible to view the nested input tags and modify the text within it?

Example Format

<div>
    <lightning-input>
        <input id="input-0">
    </lightning-input>
</div>

For more context, the input tag acts as a login field, where I am looking to populate the field when a button is pressed externally (within a mobile app).

Answer 1

You can't nest input fields, neither in LWC or even normal HTML. The reason why this doesn't work is because lightning-input doesn't have a default slot. Even getting the input element wouldn't set the lightning-input value, as that's a separate input field.

All that said, you can just set the value directly:

handleClick(event) {
  this.template.querySelector('lightning-input').value = 'Hello World!';
}

You can give the element some unique attribute if you need to retrieve it amongst several such fields on the page, such as:

<lightning-input name="username"></lightning-input>

...

const input = this.template.querySelector('lightning-input[name=username]');
input.value = 'Hello World!';