Skip to content

Latest commit

 

History

History
65 lines (47 loc) · 1.3 KB

File metadata and controls

65 lines (47 loc) · 1.3 KB

ember/template-no-shadowed-elements

💼 This rule is enabled in the following configs: strict-gjs, strict-gts.

Disallows component names that shadow HTML elements.

Using component names that match HTML element names can be confusing and may cause unexpected behavior. It's better to use more descriptive names that don't conflict with built-in elements.

Rule Details

This rule disallows component names (PascalCase) that, when lowercased, match HTML element names.

Examples

Examples of incorrect code for this rule:

<template>
  <Form>Content</Form>
</template>
<template>
  <Input @type="text" />
</template>
<template>
  <Select @options={{this.options}} />
</template>

Examples of correct code for this rule:

<template>
  <CustomForm>Content</CustomForm>
</template>
<template>
  <TextInput @type="text" />
</template>
<template>
  <SelectBox @options={{this.options}} />
</template>
<template>
  <form>Regular HTML form</form>
</template>

References