HTML テンプレートエラー

LWC は、カスタムコンポーネントでの有効な構文を強制し、いくつかの無効な構文に対してエラーをスローします。このフレームワークには、parse5 の構文制限が実装されています。

LWC API バージョン 58.0 以前では、以下の無効な構文が警告として返されます。VS Code では、警告がエディタでポップオーバーとして表示されます。問題のあるタグは、波線の下線付きで表示されます。コードを組織に転送またはリリースすると、Web コンソールに無効な HTML 構文の警告が表示されます。

LWC API バージョン 59.0 以降では HTML 検証が厳しくなっており、以前は警告が返されていたものがエラーで返されるようになります。エラーの場合、コンポーネントコードには問題を説明するポップオーバーで赤い波線が表示されます。コンポーネントはローカルに保存できますが、組織に転送またはリリースすることはできません。

LWC API バージョン 59.0 以降は、以下の無効な構文でエラーがスローされます。

HTML 要素のエラー

HTML 要素を操作しているときには、次のようなエラーが発生することがあります。

closing-of-element-with-open-child-elements

子要素の終了タグがありません。

1<template>
2  <child>
3  <!-- Close this child tag first -->
4</template>

end-tag-without-matching-open-element

要素の終了タグに対応する開始タグがありません。

1<template>
2    <h1>hello</h1>
3</template>
4</template> <!-- Remove this end tag -->

eof-in-element-that-can-contain-only-text

テキストしか含むことができない要素での予期しないファイルの終わり。

1<template>
2  <p>Hello
3  <!-- Close the tags accordingly -->

<!DOCTYPE> 要素のエラー

以下のエラーは <!DOCTYPE> 要素に関連付けられています。LWC ではカスタムコンポーネント内の <!DOCTYPE> 要素が無視されますが、サードパーティ Web コンポーネントやライブラリを使用している場合には、このタグが出現する可能性があります。

LWC では、テンプレート内の <!DOCTYPE> タグは無視されますが、フレームワークでは parse5 の実装より、この構文の制限が追加されています。

Note

misplaced-doctype

予期しない <!DOCTYPE> 要素が <head> 要素の後か、その他の許可されない場所にあります。

1<!DOCTYPE html>
2<title>misplaced-doctype</title>
3<!DOCTYPE html>
4<!-- Remove the unexpected tag -->

missing-doctype

HTML 文書の他のコンテンツの前に <!DOCTYPE> 要素がありません。

1<!-- Add the DOCTYPE element before other content -->
2<html>
3  <body>
4    ...
5  </body>
6</html>

non-conforming-doctype

<!doctype html>、<!DOCTYPE html> などの有効な <!DOCTYPE> 要素のみがサポートされています。

1<!DOCTYPE>
2<title>Fix the doctype tag</title>

<head> 要素のエラー

以下のエラーは <head> 要素に関連付けられています。LWC ではカスタムコンポーネント内の <head> 要素が無視されますが、エクスペリエンスビルダーサイトや、サードパーティ Web コンポーネント/ライブラリを使用している場合には、このタグが出現する可能性があります。

LWC では、<html>、<head>、<body> のようなタグが無視されますが、フレームワークでは parse5 の実装より、これらの構文の制限が追加されています。

Note

abandoned-head-element-child

<head> 要素の後に予期しない要素があります。<html> 要素と <body> 要素の間に <head> 要素を配置し、閉じタグが一致していることを確認してください。

disallowed-content-in-noscript-in-head

<head> 内の <noscript> 要素に予期しないコンテンツがあります。<noscript> 要素は、<head> 要素内で使用する場合、<link>、<style>、または <meta> 要素のみを含めることができます。

misplaced-start-tag-for-head-element

<head> 要素の開始タグが、<!DOCTYPE> 要素の直後ではなく、予期しない場所にあります。

nested-noscript-in-head

<noscript> 要素内に、別の予期しない <noscript> 要素があります。

1<noscript>
2  <!-- link, style, and meta elements optional -->
3  <noscript><!-- Remove this nested tag --></noscript>
4</noscript>

open-elements-left-after-eof

終了タグが必要な、予期しないファイルの終わりがあります。

1<!DOCTYPE html>
2<title>Add the missing closing tag</title>
3<noscript>

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。