`js
html

When sharing custom elements it's a good practice to add custom elements to the global interface HTMLElementTagNameMap. This rule will ensure that custom elements are registered on this interface.

The following example is considered a warning:


`ts
export class MyElement extends HTMLElement {

}

customElements.define("my-element", MyElement)
`

The following example is not considered a warning:


`ts
export class MyElement extends HTMLElement {

}

customElements.define("my-element", MyElement)

declare global {
interface HTMLElementTagNameMap {
"my-element": MyElement
}
}
`

$3

Attributes, properties and events are picked up on custom elements using web-component-analyzer which supports native custom elements and web components built with LitElement.

#### ✅ no-unknown-attribute, no-unknown-property

You will get a warning whenever you use an unknown attribute or property. This check is made on both custom elements and built in elements.

The following example is considered a warning:


`js
html
`

The following example is not considered a warning:


`js
html
`

#### ⚡️ no-unknown-event

You can opt in to check for unknown event names. Using the @fires jsdoc or the statement this.dispatch(new CustomEvent("my-event)) will make the event name available. All event names are accepted globally because events bubble.

The following example is considered a warning:


`js
html
`

The following example is not considered a warning:


`js
html
`

#### 📬 no-unknown-slot

Using the "@slot" jsdoc tag on your custom element class, you can tell which slots are accepted for a particular element. Then you will get warnings for invalid slot names and if you forget to add the slot attribute on elements without an unnamed slot.


`js
/**
* @slot - This is a comment for the unnamed slot
* @slot right - Right content
* @slot left
*/
class MyElement extends HTMLElement {
}
customElements.define("my-element", MyElement);
`

The following example is considered a warning:


`js
html


`js
html


`js
html
html;
html;
`

The following examples are not considered warnings:


`js
html
html;
html;
`

$3

Be aware that many checks involving analyzing bindings will work better in Typescript files because we have more information about the values being bound.

#### ❓ no-invalid-boolean-binding

It never makes sense to use the boolean attribute binding on a non-boolean type.

The following example is considered a warning:


`js
html
`

The following example is not considered a warning:


`js
html
`

#### ⚫️ no-expressionless-property-binding

Because of how lit-html parses bindings internally you cannot use the property binding without an expression.

The following example is considered a warning:


`js
html
`

The following example is not considered a warning:


`js
html
`

#### 🌀 no-noncallable-event-binding

It's a common mistake to incorrectly call the function when setting up an event handler binding instead of passing a reference to the function. This makes the function call whenever the code evaluates.

The following examples are considered warnings:


`js
htmlClick
htmlClick
`

The following examples are not considered warnings:


`js
htmlClick
htmlClick
`

#### 😈 no-boolean-in-attribute-binding

You should not be binding to a boolean type using an attribute binding because it could result in binding the string "true" or "false". Instead you should be using a boolean attribute binding.

This error is particular tricky, because the string "false" is truthy when evaluated in a conditional.

The following example is considered a warning:


`js
html
`

The following example is not considered a warning:


`js
html
`

#### ☢️ no-complex-attribute-binding

Binding an object using an attribute binding would result in binding the string "[object Object]" to the attribute. In this cases it's probably better to use a property binding instead.

The following example is considered a warning:


`js
html
`

The following example is not considered a warning:


`js
html
`

#### ⭕️ no-nullable-attribute-binding

Binding undefined or null in an attribute binding will result in binding the string "undefined" or "null". Here you should probably wrap your expression in the "ifDefined" directive.

The following examples are considered warnings:


`js
html
html
`

The following examples are not considered warnings:


`js
html
html
`

#### 💔 no-incompatible-type-binding

Assignments in your HTML are typed checked just like it would be in Typescript.

The following examples are considered warnings:


`js
html
html
html
html
`

The following examples are not considered warnings:


`js
html
html
html
html
`

#### 💥 no-invalid-directive-binding

Directives are checked to make sure that the following rules are met:

- ifDefined is only used in an attribute binding.
- class is only used in an attribute binding on the 'class' attribute.
- style is only used in an attribute binding on the 'style' attribute.
- unsafeHTML, cache, repeat, asyncReplace and asyncAppend are only used within a text binding.

The directives already make these checks on runtime, so this will help you catch errors before runtime.

The following examples are considered warnings:


`js
html
html
html


`js
html${unsafeHTML(html)}
html
html
html

Sometimes unintended characters sneak into bindings. This often indicates a typo such as where the expression is directly followed by a "}" which will be included in the value being bound, resulting in "foo}". Another example is self-closing tags without a space between the binding and "/" like which will result in binding the string "myvalue/".

This rule disallows mixed value bindings where a character ', ", } or / is unintentionally included in the binding.

The following examples are considered warnings:


`js
html
html
html
html
`

The following examples are not considered warnings:


`js
html
html
html
html
`

$3

#### 💞 no-incompatible-property-type

This rule checks that LitElement-controlled properties are correctly configured in accordance with the default value converter.

The following is a summary of what this rule does:

1. The type given to the LitElement property configuration is checked against the actual Typescript type of the property.
2. The default converter only accepts the types String, Boolean, Number, Array and Object, so all other values for type are considered warnings.
3. The absence of a type is only considered a warning if the property is not assignable to the string type.

This rule will not check for a given LitElement-controlled property if the property has custom converter configured.

The following examples are considered warnings:


`js
class MyElement extends LitElement {
@property({type: Number}) text: string;
@property({type: Boolean}) count: number;
@property({type: String}) disabled: boolean;
@property({type: Object}) list: ListItem[];

static get properties () {
return {
callback: {
type: Function
},
text: {
type: MyElement
}
}
}
}
`

The following examples are not considered warnings:


`js
class MyElement extends LitElement {
@property({type: String}) text: string;
@property({type: Number}) count: number;
@property({type: Boolean}) disabled: boolean;
@property({type: Array}) list: ListItem[];

static get properties () {
return {
callback: {
type: Function,
converter: myCustomConverter
},
text: {
type: String
}
}
}

}
`

#### ⁉️ no-invalid-attribute-name

When using the property option attribute, the value is checked to make sure it's a valid attribute name.

The following example is considered a warning:


`js
class MyElement extends LitElement {
static get properties () {
return {
text: {
attribute: "invald=name"
}
}
}
}
`

#### ⁉️ no-invalid-tag-name

When defining a custom element, the tag name is checked to make sure it's a valid custom element name.

The following example is considered a warning:


`js
@customElement("wrongElementName")
class MyElement extends LitElement {
}

customElements.define("alsoWrongName", MyElement);
`

The following example is not considered a warning:


`js
@customElement("my-element")
class MyElement extends LitElement {
}

customElements.define("correct-element-name", MyElement);
`

#### no-property-visibility-mismatch

When using the @property decorator, your property should be publicly visible,
expected to be exposed to consumers of the element. Private and protected
properties however, should make use of the @internalProperty decorator
instead.

This rule will ensure public properties use @property and non-public
properties use @internalProperty.

The following example is considered a warning:


`ts
class MyElement extends LitElement {
@property() private myProperty: string;
}
`

$3

lit-analyzer uses vscode-css-languageservice to validate CSS.

#### 💅 no-invalid-css

CSS within the tagged template literal css will be validated.

The following example is considered a warning:


`js
css
button
background: red;
}

`

The following example is not considered a warning:


`js
css
button {
background: red;
}

`

➤ Documenting slots, events, attributes and properties

Code is analyzed using web-component-analyzer in order to find properties, attributes and events. Unfortunately, sometimes it's not possible to analyze these things by looking at the code, and you will have to document how your component looks using jsdoclike this:


`js
/**
* This is my element
* @attr size
* @attr {red|blue} color - The color of my element
* @prop {String} value
* @prop {Boolean} myProp - This is my property
* @fires change
* @fires my-event - This is my own event
* @slot - This is a comment for the unnamed slot
* @slot right - Right content
* @slot left
* @cssprop {Color} --border-color
* @csspart header
*/
class MyElement extends HTMLElement {
}

customElements.define("my-element", MyElement);
``

➤ Contributors

| | | |
| :--------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: |
| Rune Mehlsen | Andreas Mehlsen | You? |


➤ License

Licensed under MIT.