Cannot data bind to <input> in Polymer 2.0 - data-binding

Question

I am trying to get the user input from my <paper-input-container> using this code:
<paper-input-container id="nameInput">
<label slot="label">Your name</label>
<iron-input slot="input">
<input on-keydown="keypressed" value="{{first}}" id="nameBox">
</iron-input>
</paper-input-container>
In my properties, I have:
static get properties() {
return {
first:{
type:String,
value:''
}
}
}
and my keypressed function is:
keypressed(e) {
console.log(this.first);
}
I've been able to get it to work with the <paper-input> element, but I wasn't able to style it the way I wanted to. If you know how to increase the user input text size on paper-input in Polymer 2.0, that would also help.

Answer 1

Polymer's change notification requires an event naming convention that the native <input> does not follow, so the two-way data binding you seek requires special syntax, as shown here:
target-prop="{{hostProp::target-change-event}}"
In your case, that would be:
<input value="{{first::input}}>
This tells Polymer to set first equal to value when the input event occurs from the <input>. This is equivalent to:
const inputEl = this.shadowRoot.querySelector('input');
inputEl.addEventListener('input', () => this.first = value);
demo
Alternatively, you could bind first to <iron-input>.bindValue, which reflects the value of <input>:
<iron-input bind-value="{{first}}">
<input>
</iron-input>
demo
if you know how to increase the user input text size on paper-input in polymer 2.0, that would also help
The font-size of the <paper-input>'s inner <input> can be styled with the --paper-input-container-input CSS property of <paper-input-container>:
<dom-module id="x-foo">
<template>
<style>
paper-input {
--paper-input-container-input: {
font-size: 40px;
};
}
</style>
<paper-input label="My label" value="My value"></paper-input>
</template>
</dom-module>
demo