HTML custom input with type hidden and number1 min read

I don’t think it is possible to a create an element like

<input type="hidden | number" />

Solution is to create a custom element like this

<hidden-num value="0"></hidden-num>

MDN – Using Custom ELements (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)

class InputHiddenNum extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback() {
        this.style.display = "none";
    }
    get value() {
        return this.intern_value;
    }
    set value(v) {
        this.intern_value = typeof v !== "number" ? parseFloat(v) : v;
        this.setAttribute("value", this.intern_value.toString());
    }
}

customElements.define("hidden-num", InputHiddenNum);

To add a property of value to our <hidden-num> element, we must add the get value()  and set value(val)  methods.

An attribute of value is also added to element if the value property is changed. A number  value is returned if the elem.value  is accessed.

Custom element is registered with

customElements.define(“hidden-num”, InputHiddenNum);

Built in element can also be extended like

<input is=”hidden-num” />

Refer – MDN – Customized built-in Elements (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Customized_built-in_elements)