メインコンテンツまでスキップ

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
}
}
}
PropertyTypeDefault ValueDescription
ignoreHasMutableChildrenboolean"true"動的な構文などで、ミュータブルな子要素を持つ場合は無視します。
evaluateConditionalChildNodesboolean"false"[実験中の機能] 条件付きの子ノードを評価します。

Default Severity

error

詳細

値の設定

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

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

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

tag

  • 型: string
  • 省略不可

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

contents

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

requireoptionaloneOrMorezeroOrMorechoiceの5つのいずれかのキーワードを使って定義します。

そのうちrequireoptionaloneOrMorezeroOrMoreは要素の個数を意味します。そのキーワードをキーとしてタグ名(もしくはテキストノードの場合 #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個必要
optional0個か1個
oneOrMore1個かそれ以上
zeroOrMore0個かそれ以上

任意個数の上限を 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...