Kataev

https://codepen.io/Mr_Sti4/pen/QWOOgxV

https://learn.javascript.ru/custom-elements

https://codepen.io/Mr_Sti4/pen/qBOLajG

Ограничь размеры родительского блока слайдера и задай в css свойство overflow: hidden;

Замени document на window

window.addEventListener('load', () => {
      console.log('нет!')
    })

Используй js, проверяй количество знаков в строке, в зависимости от их количества (попадания в интервал) присваивай нужный font-size. Логика у тебя теперь есть, код напиши сам, заодно поймёшь его.

Попробуйте изменить это значение и узнаете.

<div>
<label>Фамилия: </label>
<input type="text">
</div>

div {
  position: relative;
} 

label {
  position: absolute;
}

input {
  padding-left: 80px;
}