# LWC1143

Represents an error for an invalid lwc:inner-html usage on an element.

Severity: Error

# Message

Invalid lwc:inner-html usage on element "{0}". The directive binding can only be an expression or a string.

The error message format includes one placeholder: {0} is the element tag, such as <div>, <span>, or <p>.

Example diagnostic messages:

LWC1143: Invalid lwc:inner-html usage on element "<div>". The directive binding can only be an expression or a string.
LWC1143: Invalid lwc:inner-html usage on element "<table>". The directive binding can only be an expression or a string.

# Problem

LWC1143 occurs when the lwc:inner-html directive is present on an element without providing a binding value. The directive requires either an expression binding (lwc:inner-html={expr}) or a static string literal (lwc:inner-html="string"). Writing lwc:inner-html as a standalone boolean attribute, without = and a value, isn't valid because the directive needs content to render as the element's inner HTML.

# Examples

LWC1143 occurs when the lwc:inner-html directive is present without a binding value on a native HTML element.

# 1. Missing Directive Binding Value

Using lwc:inner-html without assigning a value treats it as a boolean HTML attribute. Since a boolean (true) is not a string literal or an expression, the compiler rejects it. The directive accepts two binding types—an expression or a string literal—both of which are sanitized by the LWC engine before being rendered.

# Examples with Errors

Here are several examples that return error code LWC1143.

lwc:inner-html on a <div> with no value:

<template>
    <div class="my-class" lwc:inner-html></div>
</template>

Error Message: LWC1143: Invalid lwc:inner-html usage on element "<div>". The directive binding can only be an expression or a string.

# Error Resolution Examples

Here are several ways to fix error code LWC1143.

Option 1 — Bind an expression to provide dynamic HTML content:

<template>
    <div class="my-class" lwc:inner-html={formattedContent}></div>
</template>

import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
    formattedContent = '<p>This is <strong>formatted</strong> content.</p>';
}

Option 2 — Provide a static string literal with HTML content:

<template>
    <div class="my-class" lwc:inner-html="Hello <b>world</b>!"></div>
</template>

Option 3 — Use an empty string to render no content:

<template>
    <div class="my-class" lwc:inner-html=""></div>
</template>

# Suggested Fix Steps

Consider these suggestions to fix LWC1143 errors.

# Step 1: Locate the Element

Read the error message to identify which element has the invalid lwc:inner-html usage. The element tag appears in the message, for example, <div> or <span>.

# Step 2: Add a Binding Value

The lwc:inner-html directive requires a value. Choose one of:

For specific code examples, see the preceding Error Resolution Examples section.

# Step 3: Verify the Fix

  1. Re-run the template compilation
  2. Make sure that LWC1143 no longer appears
  3. Confirm the rendered HTML content appears as expected

Back to Error Codes and Messages

← LWC1141 LWC1144 →