# LWC1057

Represents a warning when an invalid attribute is used on an HTML element.

Severity: Warning

# Message

{0} is not valid attribute for {1}. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/{1}

The error message includes two placeholders:

Example diagnostic messages:

LWC1057: unknown-attr is not valid attribute for textarea. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

# Problem

LWC1057 is a warning that occurs during template compilation when an attribute on an HTML element isn't supported according to the HTML specification. The LWC compiler validates attributes against a known list of valid attributes for each standard HTML element. This warning helps catch typos, misplaced attributes, and non-standard attribute usage before runtime.

This warning doesn’t apply to custom elements (elements with a dash in their tag name), SVG elements, global HTML attributes (class, id, title, style, etc.), data-* attributes, aria-* attributes, or role.

# Examples

LWC1057 occurs when a template uses an attribute that isn't recognized as valid for the specified HTML element.

# 1. Non-Existent Attributes on HTML Elements

Using made-up or non-standard attribute names on standard HTML elements triggers this warning. The compiler doesn’t recognize the attribute as valid for the element.

# Examples with Errors

Here are several examples that return error code LWC1057.

Custom attribute on a textarea element:

<template>
    <section>
        <textarea minlength="1" maxlength="5" unknown-attr="should-error">x</textarea>
    </section>
</template>

Error Message: LWC1057: unknown-attr is not valid attribute for textarea. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

Custom attribute on an input element:

<template>
    <input type="text" placeholder="test" custom="bad">
</template>

Error Message: LWC1057: custom is not valid attribute for input. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

# Error Resolution Examples

Here's how you can fix error code LWC1057.

Use data-* attributes for custom data:

<template>
    <textarea minlength="1" maxlength="5" data-custom="value">x</textarea>
    <div data-custom-attr="value"></div>
    <input type="text" placeholder="test" data-custom="ok">
</template>

# 2. Element-Specific Attributes on the Wrong Element

Some HTML attributes are only valid on specific elements. Using an attribute on an element where it is not supported triggers this warning. For example, href is valid on <a> but not on <div>, and type is valid on <input> but not on <p>.

# Examples with Errors

Here are several examples that return error code LWC1057.

href on a div element:

<template>
    <div href="https://example.com"></div>
</template>

Error Message: LWC1057: href is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

type on a p element:

<template>
    <p type="text"></p>
</template>

Error Message: LWC1057: type is not valid attribute for p. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

# Error Resolution Examples

Here's how you can fix error code LWC1057.

Move attributes to the correct elements:

<template>
    <a href="https://example.com">Link</a>
    <input type="text">
</template>

# 3. Misspelled ARIA Attributes

ARIA attributes like aria-describedby and aria-activedescendant are written without extra hyphens. Adding extra hyphens, such as aria-described-by instead of aria-describedby, makes them unrecognized, and the compiler treats them as invalid non-standard attributes rather than valid ARIA attributes.

# Examples with Errors

Here's an example that returns error code LWC1057.

Hyphenated aria-describedby:

<template>
    <div aria-described-by="tooltip1"></div>
</template>

Error Message: LWC1057: aria-described-by is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

# Error Resolution Examples

Here's how you can fix error code LWC1057.

Use the correct ARIA attribute names (without extra hyphens):

<template>
    <div aria-describedby="tooltip1"></div>
    <div aria-activedescendant="item1"></div>
    <div aria-errormessage="error1"></div>
    <div aria-flowto="next1"></div>
    <div aria-labelledby="label1"></div>
</template>

# 4. Attributes on Deprecated HTML Elements

Some HTML elements like <keygen> and <menuitem> are deprecated, and their element-specific attributes aren’t recognized by the compiler.

# Examples with Errors

Here are several examples that return error code LWC1057.

Attributes on the deprecated <keygen> element:

<template>
    <keygen name="name" challenge="some challenge" keytype="type" keyparams="some-params">
</template>

Error Message: LWC1057: name is not valid attribute for keygen. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/keygen

label attribute on the deprecated <menuitem> element:

<template>
    <menu>
        <menuitem label="my-menuitem">
    </menu>
</template>

Error Message: LWC1057: label is not valid attribute for menuitem. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem

# Error Resolution Examples

Here's how you can fix error code LWC1057.

Replace deprecated elements with modern alternatives:

<template>
    <!-- Instead of <keygen>, use standard form inputs -->
    <input type="text" name="name">

    <!-- Instead of <menuitem>, use buttons or links in a menu -->
    <menu>
        <li><button>My Menu Item</button></li>
    </menu>
</template>

# 5. Non-Standard Attributes Passed to Non-Custom Elements

When passing props-like attributes to standard HTML elements (instead of custom LWC components), the compiler warns because standard HTML elements only accept their defined attributes. Custom elements (elements with a dash in their tag name) don’t trigger this warning.

# Examples with Errors

Here's an example that returns error code LWC1057.

Dynamic attribute on a div element:

<template>
    <div lwc:ref="container" dynamic={dynamic}></div>
</template>

Error Message: LWC1057: dynamic is not valid attribute for div. For more information refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

# Error Resolution Examples

Here's how you can fix error code LWC1057.

Use custom elements for passing custom properties, or use data-* attributes on standard elements:

<template>
    <!-- Pass custom properties to custom elements -->
    <c-my-component dynamic={dynamic}></c-my-component>

    <!-- Or use data-* attributes on standard elements -->
    <div lwc:ref="container" data-dynamic={dynamic}></div>
</template>

# Suggested Fix Steps

Consider these suggestions to fix LWC1057 errors.

# Step 1: Identify the Invalid Attribute

Read the warning message to identify the attribute name and the element it was used on. The message format is: "{attribute} is not valid attribute for {element}".

# Step 2: Determine the Cause

Check which category your issue falls under:

# Step 3: Apply the Appropriate Fix

Based on the cause:

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

# Step 4: Verify the Fix

Re-compile your component and confirm that the LWC1057 warning no longer appears. Since this is a warning (not an error), your component can still compile, but fixing these warnings ensures your templates use valid HTML attributes.

Back to Error Codes and Messages

← LWC1056 LWC1058 →