Вольный перевод статьи.
Думая о будущем web, я думаю о небольшом количестве JS api и о невероятных возможностях HTML.
HTML — моя любимая часть стека
HTML — простой, надежный и мощный. Он постоянно улучшается.
Сообщество разработчиков в целом, а также разработчики браузеров, кажется, особенно сосредоточены на «низкоуровневых JS api», которые вы можете использовать для создания ваших web-продуктов. И это круто!
Web-компоненты довольно удобны. Но это не то, что я хочу.
Мне нужны нестандартные, готовые к использованию HTML-компоненты, которые будут интерактивными и будут обеспечивать решения проблем web-компонентов. И я хочу, чтобы они были доступны по умолчанию.
Я не хочу думаю о том, как использовать такие компоненты, как табы, выпадающие меню, и модальные окна. Я не хочу писать JS, чтобы заставить их работать. Или думать о том, какие role и aria атрибуты нужно написать, чтобы пользовательские скрин-ридеры понимали, что происходит. И я не хочу надеяться на то, что сторонний компонент верно выполнит за меня эту работу.
Я просто хочу, чтобы это было по умолчанию.
Я все еще хочу кое-что контролировать
Я не хочу писать только HTML.
Я хочу так же иметь возможность стилизовать элементы с помощью CSS. Иметь возможность повесить на них свои JS обработчики.
Но так же я хочу иметь возможность использовать их прямо из коробки, чтобы они просто работали без моего вмешательства.
Представьте, что мы можем добавить выпадающие меню на нашу страницу следующим образом:
<dropdown> <toggle>Menu Item 1</toggle> <ul> <li><a href="#">Sub Item 1</a></li> <li><a href="#">Sub Item 2</a></li> <li><a href="#">Sub Item 3</a></li> </ul> </dropdown>
Представьте, что мы можем стилизовать это меню так:
dropdown:before { content: "+"; } dropdown[expanded]:before { content: "-"; }
Или, что мы можем повесить свой обработчик так:
document.addEventListener('expand', function (event) { // Сделать что-то с раскрытым меню console.log(event.target); });
HTML, немного CSS и чуть-чуть JS — вот, что я хочу в будущем!
Оригинал статьи: ссылка