Create component where I'm interested in its value

[jkaan]

Hello!

I might be making this more complex than it has to be but I can't figure it out.

I have a simple component called PasswordField like:

<div class="container">
  <input type="password" />
</div>

I use this component in another file like:

<password-field></password-field>

Now I'm interested in the value of the input type of the password-field, how would I go about getting that value out (possibly reactive so I can have the current value always up to date)?

[zandaqo]

class PasswordField extends LitElement {
  value = '';
  static properties = {
    value: { type: String }
  }
  updateValue() {
    this.value = this.renderRoot?.querySelector('input')?.value || '';
  }
  render() {
    return html`<div class="container">
         <input type="password" .value=${this.value} @input=${this.updateValue} />
      </div>`;
  }
}

Now I'm interested in the value of the input type of the password-field, how would I go about getting that value out (possibly reactive so I can have the current value always up to date)?

const password = this.querySelector('password-field')?.value