`permitted-contents`

許可されていない要素もしくはテキストノードを子要素にもつ場合、警告します。

HTML Living Standardを基準としてMDN Web docsから最新情報を確認しています。 @markuplint/html-specに設定値を持っています。

オプションに独自のルールを設けることができます。カスタム要素やVueなどのテンプレートエンジン上での要素関係を設定することで、構造を堅牢にできます。

ルールの詳細

❌ 間違ったコード例

<ul>
	<div>許可されていないdiv要素</div>
</ul>
<ul>許可されていないテキストノード</ul>

<table>
	<thead><tr><th>ヘッダセル<th></tr></thead>
	<tfoot><tr><td>許可されていない順番のtfoot要素<td></tr></tfoot>
	<tbody><tr><td>ボディセル<td></tr></tbody>
</table>

✅ 正しいコード例

<ul>
	<li>リストアイテム</li>
	<li>リストアイテム</li>
</ul>

<table>
	<thead><tr><th>ヘッダセル<th></tr></thead>
	<tbody><tr><td>ボディセル<td></tr></tbody>
	<tfoot><tr><td>フッタセル<td></tr></tfoot>
</table>

Interface

{
  "permitted-contents": Object[]
}

Options

{
  "permitted-contents": {
    "options": {
      "ignoreHasMutableChildren"?: boolean
      "evaluateConditionalChildNodes"?: boolean
    }
  }
}

Property	Type	Default Value	Description
`ignoreHasMutableChildren`	`boolean`	`"true"`	動的な構文などで、ミュータブルな子要素を持つ場合は無視します。
`evaluateConditionalChildNodes`	`boolean`	`"false"`	[実験中の機能] 条件付きの子ノードを評価します。

Default Severity

error

詳細

値の設定

型: Array
省略可
初期値: []

ルールを設定したい対象の要素を配列で指定します。次の例はカスタム要素のx-containerとx-itemそれぞれにルールを指定していることになります。

{
  "rules": {
    "permitted-contents": [
      {
        "tag": "x-container",
        "contents": []
      },
      {
        "tag": "x-item",
        "contents": []
      }
    ]
  }
}

`tag`

型: string
省略不可

対象の要素（タグ）名を指定します。大文字小文字は区別しません。

`contents`

対象の許可する要素を配列で指定します。この配列の順番は許可するコンテンツの順番を意味します。（この配列に含まれないコンテンツは、すなわち許可されないコンテンツになります）

require、optional、oneOrMore、zeroOrMore、choiceの5つのいずれかのキーワードを使って定義します。

そのうちrequire、optional、oneOrMore、zeroOrMoreは要素の個数を意味します。そのキーワードをキーとしてタグ名（もしくはテキストノードの場合 #text）を指定します。それぞれのキーワードを同時に指定できません。

{
  "rules": {
    "permitted-contents": [
      {
        "tag": "x-container",
        "contents": [
          { "require": "x-item" },
          { "optional": "y-item" },
          { "oneOrMore": "z-item" },
          { "zeroOrMore": "#text" },
          // ❌ キーワードの同時の指定はできない
          {
            "require": "x-item",
            "optional": "y-item"
          }
        ]
      }
    ]
  }
}

キーワード	意味
`require`	必ず1個必要
`optional`	0個か1個
`oneOrMore`	1個かそれ以上
`zeroOrMore`	0個かそれ以上

任意個数の上限を max キーで指定できます。また、 require を指定するときには下限の min キーを設定できます。

組み合わせによっては、次の2つの指定は同じ意味となります。

{ "optional": "tag", "max": 5 }
{ "zeroOrMore": "tag", "max": 5 }

choiceキーワードは指定した配列に対して次の意味をもちます。

キーワード	意味
`choice`	いずれか1つ

{
  "rules": {
    "permitted-contents": [
      {
        "tag": "x-container",
        "contents": [
          {
            "choice": [{ "oneOrMore": "x-item" }, { "oneOrMore": "y-item" }]
          }
        ]
      }
    ]
  }
}

`ignoreHasMutableChildren`オプションの設定

型: boolean
初期値: true

Pugのようなプリプロセッサ言語やVueのようなコンポーネントライブラリにおけるミュータブルな子要素を含む場合、無視します。（Pug も、Vueも、それぞれ@markuplint/pug-parserや@markuplint/vue-parserが必要です）

html
	// 本来であればhead要素にtitle要素が含まれないため警告されますが、includeのようなミュータブルな要素を含むため、無視されます。
	head
		include path/to/meta-list.pug
	body
		p lorem...

permitted-contents

ルールの詳細​

Interface​

Options​

Default Severity​

詳細​

値の設定​

tag​

contents​

ignoreHasMutableChildrenオプションの設定​