`no-duplicate-id`

id属性の値が同じツリー内で重複していたら警告します。

HTML要素で指定される場合、id属性値は、要素のツリーですべてのIDに共通して一意でなければならず、かつ少なくとも1つの文字を含まなければならない。値は一切のASCII空白文字を含んではならない。

ドキュメントは1つのツリーです。template要素の内容は独立したツリーであり、宣言的シャドウルート(shadowrootmode属性を持つtemplate要素が親要素に付与されたもの)も同様なので、それぞれの中で同じidを再び使えます。宣言的シャドウルートが付与されるtemplate要素はどのツリーにも属さず、その要素自身のidは数えません。付与されるかもしれないtemplate要素(親がファイルの中にない、または親がコンポーネント、あるいはshadowrootmodeが動的な値)も同様で、わからないものは数えないためです。idは、マークアップ中の文字参照を解決したうえで比較します。abはabです。

ReactとVueでは、ディレクティブのないtemplate要素の子要素は、これらのフレームワークが要素に追加するため、ドキュメントのツリーにあります。そのため、同じツリーとして扱います。

❌ 間違ったコード例

<html>
  <body>
    <div id="a">
      <p id="a">lorem</p>
    </div>

    <div id="a"></div>
    <img id="a" src="path/to" />
  </body>
</html>

✅ 正しいコード例

<html>
  <body>
    <div id="a">
      <p id="b">lorem</p>
    </div>

    <div id="c"></div>
    <img id="d" src="path/to" />
  </body>
</html>

<div id="a"></div>
<template>
  <div id="a"></div>
</template>

<div id="b"></div>
<div>
  <template shadowrootmode="open">
    <div id="b"></div>
  </template>
</div>

error

Interface

{
  "no-duplicate-id": boolean
}

Default Severity

error

Interface​

Default Severity​

Interface

Default Severity