Skip to content

Latest commit

 

History

History
43 lines (28 loc) · 2.3 KB

no-invalid-extends.md

File metadata and controls

43 lines (28 loc) · 2.3 KB
Raw

Enforce that a custom element extends the correct class (no-invalid-extends)

There are two distinct types of Custom Elements that can be defined:

  • An autonomous custom element, which is defined with no extends option.
  • A customized built-in element, which is defined with an extends option.

The specification defines the requirements of the superclass for each of these types. Autonomous custom elements must extends the base HTMLElement class. Customized built in elements must extend the base constructor of the element they wish to extend, for example an element that is defined as extends: "p" must itself extends HTMLParagraphElement. Trying to extend from another class will silently fail, and the browser will not upgrade the element to the desired class.

Rule Details

This rule enforces that any call to customElements.define must be given the correct superclass. If the extends option is passed, then the given classes superclass must match the named element. If the extends option is not passed, then the given classes superclass must be HTMLElement or specified by the allowedSuperNames ESLint option.

The following patterns are considered warnings:

customElements.define('foo-bar', class extends HTMLParagraphElement {})
// ^ `foo-bar` extends HTMLParagraphElement but define call did not extend `p`
customElements.define('foo-bar', class extends HTMLElement {}, {extends: 'p'})
// ^ `foo-bar` extends `p` but it extends HTMLElement

The following patterns are not warnings:

customElements.define('foo-bar', class extends HTMLElement {})
customElements.define('foo-bar', class extends HTMLParagraphElement {}, {extends: 'p'})

Options

  • The elementBaseClasses supplied in settings (read more in the readme) will also be allowed.
  • allowedSuperNames is an array option (default: []) can specify what classes an Autonomous custom element may extend. It is assumed that by using this option, any allowed super name must extend HTMLElement in its prototype chain.

When Not To Use It

If you are comfortable with silent failures when extending types don't match.