template-no-shadowed-elements.md

ember/template-no-shadowed-elements

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

This rule prevents ambiguity in situations where a yielded block param which starts with a lower case letter is also used within the block itself as an element name.

Examples

This rule forbids the following:

<FooBar as |div|>
  <div></div>
</FooBar>

This rule allows the following:

{{#foo-bar as |Baz|}}
  <Baz />
{{/foo-bar}}

<FooBar as |Baz|>
  <Baz />
</FooBar>

{{#with foo=(component 'blah-zorz') as |Div|}}
  <Div />
{{/with}}

<Foo as |bar|>
  <bar.baz />
</Foo>

References

• Ember guides/block content
• rfcs/angle bracket invocation
• rfcs/named blocks