require-element

指定された要素がドキュメントまたは要素に表示されなかった場合、警告します。セレクターを使用して指定します。

これは必要な要素を検索するための汎用的なルールです。ドキュメントまたは要素のツリーを検索します。template要素の内容や宣言的シャドウルートの中は独立したツリーなので、そこにあるだけでは必要な要素を満たしません。

備考

h1要素が必要な場合はrequire-h1ルールを使用してください。ランドマーク要素の構造をチェックする場合はno-nested-top-level-landmarkルールを使用してください。HTML標準に準拠しているかどうかはpermitted-contentsルールを使用してください。

❌ 間違ったコード例

<!-- "require-element": ["meta[charset=\"UTF-8\"]"] -->
<head>
  <title>Page title</title>
</head>

✅ 正しいコード例

<!-- "require-element": ["meta[charset=\"UTF-8\"]"] -->
<head>
  <meta charset="UTF-8" />
  <title>Page title</title>
</head>

Interface

{
  "require-element": string[]
}

Options

{
  "require-element": {
    "options": {
      "ignoreHasMutableContents"?: boolean
      "ignoreOmittedElements"?: boolean
    }
  }
}

Property	Type	Default Value	Description
ignoreHasMutableContents	boolean	"true"	Pugのようなプリプロセッサ言語やVueのようなコンポーネントライブラリにおけるミュータブルな子要素や、pretenderが解決しなかったコンポーネントを含む場合、無視します。（Pugも、Vueも、それぞれ@markuplint/pug-parserや@markuplint/vue-parserが必要です）
ignoreOmittedElements	boolean	"true"	HTMLパーサーが暗黙的に生成した省略要素（ゴースト要素）を無視します。trueの場合、明示的に記述された要素のみが要件を満たします。

Default Severity

error

設定例

rulesに指定すると、ドキュメント全体から要素を検索します。

{
  "rules": {
    "require-element": ["meta[charset=\"UTF-8\"]"]
  }
}

nodeRulesまたは childNodeRulesに指定されている場合、ターゲット要素の子要素から要素を検索します。

{
  "nodeRules": [
    {
      "selector": "head",
      "rules": {
        "require-element": ["meta[charset=\"UTF-8\"]"]
      }
    }
  ]
}

ignoreHasMutableContentsオプションの設定

• 型: boolean
• 初期値: true

必須の要素を何が描画するのかがわからない場合は、検査を行いません。要素に対する指定では、わからない子を表す子（Pugのincludeのようなプリプロセッサ言語のブロック、<slot>、JSXの<Meta />のようにpretenderが解決しなかったコンポーネント）が対象です。ドキュメント全体に対する指定では、これらや式がどこかにあれば対象です。pretenderが解決したコンポーネントは、それが表す要素として検査します。子の子孫が描画するものは、その要素の子ではないので、検査は省略されません。

<!-- "require-element": ["meta[charset=\"UTF-8\"]"] -->
<head>
  <meta />
</head>

書かれたとおりに検査したい場合は、ignoreHasMutableContentsをfalseに設定してください。

ignoreOmittedElementsオプションの設定

HTMLでは特定のタグを省略できます（例：<tbody>）。HTMLパーサーはこれらの省略された要素をゴーストノードとして暗黙的に生成します。デフォルトでは、これらのゴースト要素は無視されます。つまり、ソースコードに明示的に記述された要素のみが要件を満たします。ゴースト要素も要件を満たすものとして扱いたい場合は、ignoreOmittedElementsをfalseに設定してください。

{
  "nodeRules": [
    {
      "selector": "table",
      "rules": {
        "require-element": {
          "value": ["tbody"],
          "options": {
            "ignoreOmittedElements": false
          }
        }
      }
    }
  ]
}