can/demos/forms/advanced-not-sticky.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<not-sticky-uppercase></not-sticky-uppercase>

<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { StacheElement } from "can";

class NotStickyUppercase extends StacheElement {
    static view = `
        <label>
            scopeProp:
            <input type="text" value:from="this.scopeProp"
              on:change:value:to="this.scopeProp">
        </label>

        <p>scopeProp: {{ this.scopeProp }}</p>
    `;

    static props = {
        set scopeProp(val) {
            return val.toUpperCase();
        }
    };
};
customElements.define("not-sticky-uppercase", NotStickyUppercase);
</script>