Несколько HTML одинаковых идентификаторов элементов, если только один отображается в DOM

Question

Можете ли вы иметь несколько одинаковых элементов id, если в dom отображается только один?Например, в Laravel вы можете иметь:

 @if (Route::has('login'))
   @auth
     <h2 id='header'>Dashboard</h2>
 @else
     <h2 id='header'>Sign up</h2> 
   @endauth
 @endif

Я понимаю, что использование нескольких идентификаторов для одних и тех же элементов является плохой практикой, но технически в такой ситуации только один элемент будет отображаться в DOM, насколько это возможно в браузере.при условии, что он обнаруживает только один из них, может ли это иметь какие-либо негативные последствия в отношении JavaScript и т. д.?Это может упростить CSS.
Я не планирую использовать это в своих проектах, просто любопытно.

Answer 1

Я бы пошел по этому пути:

@if (Route::has('login'))
  <h2 id="header">{{ Auth::check() ? 'Dashboard' : 'Sign up' }}</h2>
@endif

Answer 2

Если будет визуализирован только один из них "h2", это не отличается от написания только одного из них из-за вашего кода, нет никакой возможности, что два "h2" будут отображены в DOM

единственное, что вызовет проблему, если любые два элемента были отображены в DOM с одинаковым идентификатором

, в этом случае, если вы попытались выбрать один из них или применить к ним любые js, он выберет первыйэлемент был представлен на DOM

Answer 3

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

Примером этого будет:

#header {
 font-size: 1.5rem;
}

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

Итак, если обобщить, что ваш код в порядке, он получит только один элемент на странице с идентификатором, когда он будет обработан.