Máscara para input CPF somente HTML e JS puro

form.html

<input type="text" name="cpf" placeholder="CPF" required oninput="cpfMask(this);" pattern="\d{3}\.\d{3}\.\d{3}-\d{2}">

<script>
    function cpfMask(i) {   
        let v = i.value;
        let digits = v.replace(/[^0-9]/g, '').substring(0, 11);
        let formatted = digits;

        formatted = formatted.replace(/^(\d{3})(\d)/, "$1.$2");
        formatted = formatted.replace(/^(\d{3})\.(\d{3})(\d)/, "$1.$2.$3");
        formatted = formatted.replace(/^(\d{3})\.(\d{3})\.(\d{3})(\d)/, "$1.$2.$3-$4");

        i.value = formatted;
        return;
    }
</script>