# LWC1140

Represents an error for applying lwc:inner-html to a non-native HTML element.

Severity: Error

# Message

Invalid lwc:inner-html usage on element "{0}". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.

The error message format includes one placeholder: {0} is the element tag on which lwc:inner-html was used.

Example diagnostic messages:

LWC1140: Invalid lwc:inner-html usage on element "<c-rich-text>". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.

LWC1140: Invalid lwc:inner-html usage on element "<lwc:component>". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.

# Problem

LWC1140 occurs when the lwc:inner-html directive is used on a custom element (a tag with a hyphen, like <c-my-component> or <c-rich-text>) or on a special LWC managed element like <lwc:component>. The lwc:inner-html directive sets the inner HTML content of a DOM element directly, so it can only be used on standard HTML elements (like <div>, <span>, <p>) where the framework has direct control over the DOM content. Custom elements are managed by their own component logic, and injecting raw HTML into them would conflict with their internal rendering.

# Examples

LWC1140 is thrown when lwc:inner-html is applied to a custom element or an LWC managed element. The directive is only valid on native HTML elements.

# 1. Using lwc:inner-html on Non-Native Elements

Custom elements represent LWC components that manage their own internal DOM. Similarly, <lwc:component> is a special LWC managed element used for dynamic component instantiation. The lwc:inner-html directive cannot be used on either because it would bypass the component's own rendering logic.

# Examples with Errors

On a custom element:

<template>
    <c-rich-text lwc:inner-html={content}></c-rich-text>
</template>

Error Message: LWC1140: Invalid lwc:inner-html usage on element "<c-rich-text>". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.

On <lwc:component> with lwc:is (with enableDynamicComponents: true):

<template>
    <lwc:component lwc:is={dynamicCtor} lwc:inner-html={content}></lwc:component>
</template>

Error Message: LWC1140: Invalid lwc:inner-html usage on element "<lwc:component>". The directive can't be used on a custom element or special LWC managed elements denoted with lwc:*.

# Error Resolution Examples

Use a native HTML element instead:

<template>
    <div lwc:inner-html={content}></div>
</template>

Move lwc:inner-html to a native element alongside the dynamic component:

<template>
    <lwc:component lwc:is={dynamicCtor}></lwc:component>
    <div lwc:inner-html={content}></div>
</template>

# Suggested Fix Steps

# Step 1: Identify the Invalid Element

Look at the error message to find which element has the lwc:inner-html directive. The element name is shown in angle brackets (e.g., <c-rich-text>, <lwc:component>).

# Step 2: Move the Directive to a Native HTML Element

Replace the custom element or LWC managed element with a standard HTML element such as <div>, <span>, or <p>. See the Error Resolution Examples in the Examples section.

If you need to render HTML content inside a custom component, consider passing the content as a property to the child component and having the child use lwc:inner-html on a native element in its own template.

# Step 3: Verify the Fix

1. Re-compile your template
2. Ensure LWC1140 no longer appears
3. Test that the rendered HTML content displays as expected