template-no-block-params-for-html-elements.md

ember/template-no-block-params-for-html-elements

💼 This rule is enabled in the 📋 template-lint-migration config.

Disallow block params on HTML elements.

Block params (using the as |param| syntax) are a feature specific to Ember components and block helpers. They should not be used on regular HTML elements.

Rule Details

This rule disallows using block params on HTML elements. Use components if you need to pass block params.

Examples

Incorrect ❌

<template>
  <div as |content|>
    {{content}}
  </div>
</template>

<template>
  <section as |data|>
    <p>{{data}}</p>
  </section>
</template>

<template>
  <ul as |items|>
    <li>{{items}}</li>
  </ul>
</template>

Correct ✅

<template>
  <div>Content</div>
</template>

<template>
  <MyComponent as |item|>
    {{item.name}}
  </MyComponent>
</template>

<template>
  {{#each this.items as |item|}}
    <li>{{item}}</li>
  {{/each}}
</template>

Related Rules

• template-no-arguments-for-html-elements

References

• Ember Guides - Block Content
• eslint-plugin-ember template-no-yield-only