Repository files navigation

This is an ESLint Plugin to help provide best practices for writing Custom Elements aka Web Components. It provides a set of custom rules which can be enforced for files that declare classes that extend from HTMLElement.

Node 14.x

$ npm install --save-dev eslint eslint-plugin-custom-elements

Addcustom-elements to your list of plugins in your ESLint config, and enable the rules you want or just addplugin:custom-elements/recommended to theextends array.

JSON ESLint config example:

{"extends": ["plugin:custom-elements/recommended"]}

• Define Tag After Class Definition
• Expose Class on Global
• Extends Correct Class
• File Name Matches Element
• No Constructor
• No Customized Built in Elements
• No DOM Traversal in Attributechangedcallback
• No DOM Traversal in Connectedcallback
• No Exports with Element
• No Method Prefixed with on
• No Unchecked Define
• One Element Per File
• Tag Name Matches Class
• Valid Tag Name

npm installnpm test

Distributed under the MIT license. See LICENSE for details.