`require-ancestor`

HTML Living Standardに基づき、要素がコンテンツモデルで指定された必須の祖先要素(descendantOf)なしに出現している場合に警告します。設定は@markuplint/html-specにあります。

祖先は、その要素が属するツリーの中で探します。template要素の内容は別のドキュメントフラグメントに属し、マークアップからはその内容がどこに挿入されるか分かりません。そのため、探索はtemplate要素の内容の外に出ず、探索が内容の先頭で終わった要素は、template要素の外に該当する祖先があってもなくても警告しません。宣言的シャドウルート(<template shadowrootmode>)の内容もそれ自身のツリーで、その外にある祖先は数えないため、警告します。テンプレートエンジンのディレクティブを持つtemplate要素(Vueの<template v-if>)はHTMLのtemplate要素ではないため、探索はそれを通り抜けます。ReactとVueでは、ディレクティブのないtemplate要素は子要素が文書の中にある通常の要素なので、探索は他の要素と同じようにそれを通ります。

出力が分からないコンポーネント(プリテンダーがなく、何を描画するかをファイルから知れないもの)は、探している祖先を描画するかもしれません。そのため、ツリーの先頭までの祖先にそのようなコンポーネントがある要素は警告しません。プリテンダーがコンポーネントの描画する要素を示している場合はその要素として扱い、ウェブコンポーネントは書かれたとおりの要素として扱います。フレームワークの組み込みコンポーネント(VueのTransition、component)はこれにあたります。フラグメント、ディレクティブを持つtemplate要素、slotのように子要素をその場に描画するものは、出力が分からないコンポーネントではありません。

ファイルの中に親ノードを持たない要素は警告しません。パーシャルやコンポーネントの先頭にある要素がこれにあたり、そのファイルがどこに挿入されるかはマークアップからは分かりません。JSXのフラグメント、テンプレート言語のブロック、ディレクティブを持つtemplate要素は親ノードではないため、ファイルの先頭にあるそれらの中の要素も警告しません。要件は、親ノードを持つ要素に対するものです。

親ノードとともにarea要素は、map要素の祖先を持たなければならない。

HTML Living Standard: area要素より引用

❌ 間違ったコード例

<div>
  <area href="/path" alt="Link" />
</div>

✅ 正しいコード例

<map name="example">
  <area href="/path" alt="Link" />
</map>

Interface

{
  "require-ancestor": boolean
}

Default Severity

error

Interface​

Default Severity​

Interface

Default Severity