HTML テンプレートエラー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連トピック