如果仅在DOM中呈现一个HTML相同的id元素，则多个

Question

Can you have multiple same id elements if only one is rendered in the dom? For example in Laravel you can have:

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

I realize multiple id on same elements is bad practice, but technically in a situation like this only one element would be rendered in the DOM, as far as browser is conserned, it only detects one of them, so would it have any bad effects regarding javascript etc..? It can simplify css though.
I don't plan to use this in my projects, just curious.

Answer 1

I would go this way :

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

Answer 2

In any case having a class is better even for the css as the ID adds a much bigger weight on the element, for example if you want to override a css property you won't be able to achieve it by just adding a class.

An example for this will be:

#header {
 font-size: 1.5rem;
}

later you want to override the css on just one header element and not on the other, adding a class to that element won't override the font-size of the element. I hope I am clear with the example.

So to summarize your code is okay, it will get only one element on the page with the ID when it get's rendered.

Answer 3

If only one "h2" of them will be rendered, it doesn't differ from writing only one of them due to your code, there's no way the two "h2" will be rendered in the DOM

the only thing will cause a problem if any two elements were rendered in the DOM with the same ID

in that case, if you tried to select one of them or apply any js to them it will select the first element was rendered on the DOM