How to target LWC by name attribute?

During a submit I’d like to intercept the event and run some custom validation on the input values. Here is a simplified template of what I’d like to do:

<template>
  <lightning-input type="text" name="foo" label="Foo"></lightning-input>
  <lightning-button onclick={foo} label='Validate'></lightning-button>
</template>
foo() {
  let element = this.template.querySelector("lightning-input");
  let value = element.value;

  if (value !== '42') {
    element.setCustomValidity("Error!");
  } else {
    element.setCustomValidity("");
  }

  element.reportValidity();
}

The code above works as expected. But ideally I’d like to individually target a unique element. When I then read the documentation it clearly states:

Don’t use ID selectors with querySelector. The IDs that you define in
HTML templates may be transformed into globally unique values when the
template is rendered. If you use an ID selector in JavaScript, it
won’t match the transformed ID.

With the attribute id out of the question, I thought that the attribute name could “replace” it. So I re-wrote the code to the following:

foo() {
  let element = this.template.querySelector("[name='foo']");
  let value = element.value;

  if (value !== '42') {
    element.setCustomValidity("Error!");
  } else {
    element.setCustomValidity("");
  }

  element.reportValidity();
}

But that does not work. No matter how I try to target an individual element with the name attribute, the query selector never finds it. Is this a bug or am I doing something wrong here?

Note: If I add the attribute data-id on it and query for that instead; it works.

Answer

The problem is that the name attribute is not placed on the lightning-input element but on the internal input element. So you are trying to access component internals which is prevented by Lightning Locker as you are not the owner of the lightning namespace.

If you want to select the component element you have to use something like a data attribute like mentioned in your Note

Attribution
Source : Link , Question Author : Dinco , Answer Author : Alba Rivas

Leave a Comment