Edit in JSFiddle

<clock-face hour="9" minute="30" second="10"></clock-face>

<label for="hour">Hour:</label>
<input type="number" value="9" min="1" max="12" id="hour">
    
<label for="minute">Minute:</label>
<input type="number" value="30" min="0" max="59" id="minute">
    
<label for="second">Second:</label>
<input type="number" value="10" min="0" max="59" id="second">

var inputs = document.querySelectorAll( "input" );
for ( var i = 0; i < inputs.length; i++ ) {
    inputs[ i ].addEventListener( "change", function() {
        document.querySelector( "clock-face" )
            .setAttribute( this.id, this.value );
    });
}