Обнаружил забавный проект <html->, где автор в качестве эксперимента пытается максимально точно реплицировать существующие HTML-элементы с помощью API веб-компонентов. Названия элементов используются стандартные, но с дефисом в конце, так как пользовательские элементы должны содержать минимум один дефис в названии. При этом дефис в конце — валидное имя пользовательского элемента.
При воссоздании элементов автор учитывает стандартные стили браузера, семантику, атрибуты, свойства и поведение. Если с элементами вроде
<abbr-> или <b-> все довольно просто, то вот с элементами <a-> или <button-> всё уже намного сложнее. Даже у элемента <aside-> есть подводные камни, связанные с семантикой, которая зависит от родительских элементов.Использовать это на реальных проектах, само собой, не стоит, о чём автор прямо предупреждает в описании проекта.
<html-> A forward thinking custom elements library that you probably shouldn’t use.
Like actually. As an exercise of seeing how much we can do with the Web Components APIs, this is an attempt to re-implement much of HTML with it.
Еще я вижу тут отсылку к библиотеке Shoelace, про которую я как-то рассказывал. Потому что её слоган звучит так:
A forward-thinking library of web components.
Тем не менее, проект <html-> интересен тем, что раскрывает возможности стандартных HTML-элементов и показывает их реализацию на JavaScript. У некоторых элементов много скрытых возможностей под капотом, которые нужно будет повторить. Лично мне интересно будет взглянуть на реализацию таких элементов, как
<input>, <select> или <link>.Также это хороший пример того, сколько всего нужно реализовать, когда разработчики по каким-то причинам отказываются от стандартных элементов, например
<a>, и пытаются "повторить" с помощью <div role="link" tabindex="0"> и JavaScript.Ну и проект может послужить примером использования API веб-компонентов и как далеко автор сможет зайти с ними. Это является главной целью проекта.