no-shadowed-elements.md

no-shadowed-elements

✅ The extends: 'recommended' property in a configuration file enables this rule.

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></Div>
{{/with}}

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

Related rules

• no-invalid-block-param-definition

References

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