Недавно наткнулся на пользовательские веб-компоненты. Хоть я и давний разработчик, но не знал об их существовании 🙈. В основном они позволяют создавать собственные HTML-теги.

Я пытался воссоздать карты трофеев PlayStation, где мне нужна была переворачиваемая карта. Я знаю, что React основан на компонентах, но я хотел создать свой собственный компонент на простом JavaScript и HTML и быстро обнаружил, что пользовательский веб-компонент — это то, что нужно.

Я прочитал кое-какую документацию, чтобы начать работу, и вот результат — мой собственный HTML-тег:

Он даже поддерживает горизонтальное и вертикальное отражение:

Или сделайте так, чтобы карта показывала обратную сторону по умолчанию:

Некоторые примеры и исходники вы можете найти на мой GitHub. Не стесняйтесь расширять и корректировать его, но ставьте ⭐️, когда вы это делаете. Спасибо!