[Malleys]

можно пояснить, что делают строки

this.attachShadow({ mode: "open" });

Подключает к элементу теневой DOM, который изолирован от остального DOM.

Например, если вы написали компонент, который хотите использовать на страницах, причем так, чтобы стили страниц никак не влияли на визуальное оформление компонента, то вы можете подключить теневой DOM.

Без такой изоляции в DOM применяемые компоненты могут воздействовать друг на друга (например, применённые стили из других компонентов), вот теневой DOM позволяет использовать без оглядки на используемые на странице и во всех её фрагментах стили.

Откройте настройки, например, Chrome DevTools (когда смотрите консоль, нажмите F1) и включите «Show user agent shadow DOM», теперь вы можете посмотреть как устроены, например, элементы <input type="range">, <select>, <video> и т. д. «изнутри». Так же нужно помнить, что наружу из компонента видны только те события, которые вы пробросите и никто не сможет подписаться на какой-нибудь "change" у <input> внутри компонента.

static get observedAttributes() {
    return ["max-size", "for"];
}

Изменение каких атрибутов отслеживать, когда что-то из указанного поменяется, вызовется метод attributeChangedCallback