LWC1009: <template> directives are not allowed at the top level

Every LWC HTML file's outermost element is <template>, and the platform won't let you put template directives on it. Directives go on inner templates or on regular elements.

What's wrong

<!-- ❌ LWC1009 -->
<template if:true={isVisible}>
  <p>This entire component renders only when visible.</p>
</template>

The compiler refuses because there's no semantic for "the entire component is conditionally rendered." That's the parent's job (the parent decides when to instantiate this component).

What works

Wrap the conditional content in an inner <template>:

<!-- ✅ -->
<template>
  <template if:true={isVisible}>
    <p>This block renders only when visible.</p>
  </template>
</template>

For lists:

<template>
  <ul>
    <template for:each={items} for:item="item">
      <li key={item.id}>{item.name}</li>
    </template>
  </ul>
</template>

For if/else:

<template>
  <template lwc:if={loaded}>
    <p>Loaded!</p>
  </template>
  <template lwc:else>
    <p>Loading…</p>
  </template>
</template>

(lwc:if / lwc:elseif / lwc:else is the modern syntax. The older if:true / if:false still works but is being deprecated.)

Why this design

Treating the outermost template as a render barrier means components have a stable identity — the framework can mount and unmount them by class, regardless of whether any content is showing. The conditional rendering happens inside the component's own DOM tree, where it has somewhere to be.

If you want a component that itself should render conditionally, the parent does it:

<!-- parent.html -->
<template>
  <template lwc:if={shouldShow}>
    <c-my-child></c-my-child>
  </template>
</template>

Other LWC1xxx errors that look similar

These are all clear and self-explanatory once you know the rule. The official LWC compiler errors page lists each by code with examples.