`no-disallowed-ancestor`

HTML Living Standardに基づき、要素が、コンテンツモデルが明示的に禁止している祖先要素(forbiddenAncestors)の子孫として出現している場合、またはコンテンツモデルが限定する祖先要素(permittedAncestors)以外を祖先に持つ場合に警告します。設定は@markuplint/html-specにあります。

子要素が親要素自体のコンテンツモデルで許可されているかどうかはpermitted-contentsの担当であり、このルールの対象ではありません — 一部の要素は、直接の親であるかどうかにかかわらず、特定の祖先要素の下のどこにも出現できないという追加の制約を持っています。

main要素の祖先は、仕様が挙げる要素に限られます。

階層的に正しいmain要素は、祖先要素がhtml、body、div、アクセシブルな名前のないform、および自律カスタム要素に限定されるものである。各main要素は、階層的に正しいmain要素でなければならない。

HTML Living Standard: main要素より引用

コンポーネントはカスタム要素として扱い、pretendersが置き換えるコンポーネントは、置き換え先の要素として判定します。formのアクセシブルな名前は、推奨のARIAバージョンで計算します。aria-labelやtitleの動的な値(式やテンプレートタグ)は名前とみなすため、値が実行時に空になりうる場合でも、そのようなformの中のmain要素は報告されます。

template要素の内容は別のドキュメントフラグメントに属し、その中の要素は祖先を持ちません。そのため、検査はtemplate要素を越えません。テンプレートエンジンのディレクティブを持つtemplate要素(Vueの<template v-if>)はHTMLのtemplate要素ではないため、検査はそれを通り抜けます。ReactとVueでは、ディレクティブのないtemplate要素は子要素が文書の中にある通常の要素なので、検査は他の要素と同じようにそれを通ります。

❌ 間違ったコード例

<address>
  <div>
    <address>Nested address</address>
  </div>
</address>

<section>
  <main>Main content</main>
</section>

<form aria-label="Search">
  <main>Main content</main>
</form>

✅ 正しいコード例

<address>Contact information</address>

<body>
  <div>
    <main>Main content</main>
  </div>
</body>

<x-layout>
  <main>Main content</main>
</x-layout>

Interface

{
  "no-disallowed-ancestor": boolean
}

Default Severity

error

Interface​

Default Severity​

Interface

Default Severity