Соглашение об именах для компонентов, которые могут совместно использовать имя элемента HTML?

Question

В моем проекте Vue у меня есть компонент, который действует как заголовок сайта и компонент, который действует как нижний колонтитул сайта.

Я не могу использовать их как <header> и <footer>, конечно, потому что это уже элементы HTML.

Есть ли соглашение об именах, которое подходит для этой ситуации? До сих пор я использовал что-то вроде <site-header>, потому что он просто добавляет префикс ради него.

Answer 1

Префикс может быть добавлен для этого. Но его хорошая практика в соответствии с W3C правил, а также указана в Vue docs:

Обратите внимание, что Vue не соблюдение W3C правил для имен пользовательских тегов (все-строчных букв, должен содержать дефис), хотя после этой конвенции является считается хорошей практикой.

Это то, что я предпочитаю: Если ваш компонент специфичен для конкретного приложения, он должен иметь конкретное имя приложения.

Если его компонент, который можно использовать попеременно, имя должно быть основано на его функции. Например, <credit-card></credit-card>

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