# LWC1051
Represents a forbidden template tag error.
Severity: Error
# Message
Forbidden tag found in template: '<{0}>' tag is not allowed.
The error message format includes one placeholder: {0} contains the name of the forbidden HTML tag.
Example diagnostic messages:
LWC1051: Forbidden tag found in template: '<script>' tag is not allowed.
LWC1051: Forbidden tag found in template: '<title>' tag is not allowed.
LWC1051: Forbidden tag found in template: '<meta>' tag is not allowed.
# Problem
LWC1051 occurs when you use certain document-level HTML tags within your LWC template. These tags (<script>, <title>, <meta>, <link>, and <base>) are designed for document-level operations and belong in the <head> section of a full HTML document.
# Examples
LWC components are encapsulated UI building blocks that render within a larger application context, and specific document-level tags are forbidden for security, architectural, and encapsulation reasons.
# 1. Using script tag
<script> tag - Forbidden for security reasons:
- Scripts in templates could execute untrusted code
- Would bypass LWC's Content Security Policy (CSP)
- Breaks component isolation and encapsulation
- External scripts could access shadow DOM internals
# Examples with Errors
Here's an example that returns error code LWC1051.
Using <script> tag:
<template>
<script src="/assets/analytics.js"></script>
</template>
Error Message:
LWC1051: Forbidden tag found in template: '<script>' tag is not allowed.
# Error Resolution Example
Here's how you can fix error code LWC1051.
Move logic to your component class:
import { LightningElement } from 'lwc';
export default class UserProfile extends LightningElement {
connectedCallback() {
console.log('Component connected');
this.initializeComponent();
}
initializeComponent() {
// Your initialization logic here
}
}
# 2. Using title and meta tags
<title> and <meta> tags - Forbidden as document metadata:
- Control browser window title, character encoding, viewport, and page descriptions
- Components are reusable UI pieces, not full pages
- Multiple components with these tags would create conflicts
- Document metadata should be controlled at the application level
# Examples with Errors
Here are several examples that return error code LWC1051.
Using <title> tag:
<template>
<title>User Dashboard</title>
</template>
Error Message:
LWC1051: Forbidden tag found in template: '<title>' tag is not allowed.
Using <meta> tag:
<template>
<meta name="description" content="Dashboard view" />
</template>
Error Message:
LWC1051: Forbidden tag found in template: '<meta>' tag is not allowed.
# Error Resolution Example
Here are several ways to fix error code LWC1051.
For <title> tag - Set document title in parent application:
<!DOCTYPE html>
<html>
<head>
<title>Salesforce Dashboard</title>
</head>
<body>
<c-dashboard-view></c-dashboard-view>
</body>
</html>
For <meta> tag - Set document metadata in parent application:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Salesforce Dashboard Application">
</head>
<body>
<c-dashboard-view></c-dashboard-view>
</body>
</html>
# 3. Using link and base tags
<link> and <base> tags - Forbidden as resource/configuration tags:
- Control document-level resource loading (stylesheets, favicons) and URL resolution
- Would break component encapsulation and affect the entire application
- Components should use their own CSS files for styling
- Document-wide URL configuration would break other components
# Examples with Errors
Here are several examples that return error code LWC1051.
Using <link> tag:
<template>
<link href="styles/theme.css" />
</template>
Error Message:
LWC1051: Forbidden tag found in template: '<link>' tag is not allowed.
Using <base> tag:
<template>
<base href="https://salesforce.com" />
</template>
Error Message:
LWC1051: Forbidden tag found in template: '<base>' tag is not allowed.
# Error Resolution Examples
Here are several ways to fix error code LWC1051.
For <link> tag - Use component CSS files:
.badge-container {
padding: 20px;
background-color: #f5f5f5;
}
<template>
<div class="badge-container">
<h1 class="badge-title">Status Badge</h1>
</div>
</template>
For <base> tag - Set base tag in parent application:
<!DOCTYPE html>
<html>
<head>
<base href="https://salesforce.com/">
</head>
<body>
<c-navigation-menu></c-navigation-menu>
</body>
</html>
# Suggested Fix Steps
Consider these suggestions to fix LWC1051 errors.
# Step 1: Identify the Forbidden Tag
- Read the LWC1051 error message to identify which tag is forbidden
- Note the line and column number where the tag appears
- Understand why this tag is forbidden (see the Examples section above)
- Determine what you were trying to accomplish with this tag
# Step 2: Choose the Appropriate Alternative
Based on which forbidden tag you're using, choose the correct alternative:
For <script> tags:
- Move JavaScript logic to your component class file
- Use
loadScript()fromlightning/platformResourceLoaderfor third-party libraries - Import JavaScript modules using standard ES6 imports
For <title> and <meta> tags:
- Define title and meta tags in your parent application's HTML document
- Set the document title programmatically using
document.titlein your component - Use component properties to pass metadata values instead
For <link> and <base> tags:
- Create CSS files for your component styling
- Use
loadStyle()fromlightning/platformResourceLoaderfor external stylesheets - Use absolute URLs or component properties for URL paths
- Set link and base tags in your parent application's HTML document
# Step 3: Implement the Fix
Remove the forbidden tag from your template and implement the appropriate alternative based on Step 2. For specific code examples, see the Error Resolution Examples in the preceding Examples section.
# Step 4: Verify the Fix
- Re-compile your component
- Make sure that LWC1051 no longer appears
- Test that your component functions as expected