<commit_before>---
title: Mixins
eleventyNavigation:
  parent: Composition
  key: Mixins
  order: 3
---

Class mixins are a pattern for sharing code between classes using standard JavaScript. As opposed to "has-a" composition patterns like [reactive
controllers](/docs/composition/controllers/), where a class can _own_ a controller to add
behavior, mixins implement "is-a" composition, where the mixin causes the class
itself to _be_ an instance of the behavior being shared.

You can use mixins to customize a Lit component by adding API or overriding its lifecycle callbacks.

## Mixin basics

Mixins can be thought of as "subclass factories" that override the class they
are applied to and return a subclass, extended with the behavior in the mixin.
Because mixins are implemented using standard JavaScript class expressions, they
can use all of the idioms available to subclassing, such as adding new
fields/methods, overriding existing superclass methods, and using `super`.

<div class="alert alert-info">

For ease of reading, the samples on this page elide some of the TypeScript types
for mixin functions. See [Mixins in TypeScript](#mixins-in-TypeScript) for details on proper
typing of mixins in TypeScript.

</div>

To define a mixin, write a function that takes a
`superClass`, and returns a new class that extends it, adding fields and methods
as needed:

```ts
const MyMixin = (superClass) => class extends superClass {
  /* class fields & methods to extend superClass with */
};
```

To apply a mixin, simply pass a class to generate a subclass with the mixin
applied. Most commonly, users will apply the mixin directly to a base class when defining
a new class:

```ts
class MyElement extends MyMixin(LitElement) {
  /* user code */
}
```

Mixins can also be used to create concrete subclasses that users can then extend
like a normal class, where the mixin is an implementation detail:

```ts<commit_msg>Fix casing in link fragment (#360)<commit_after>---
title: Mixins
eleventyNavigation:
  parent: Composition
  key: Mixins
  order: 3
---

Class mixins are a pattern for sharing code between classes using standard JavaScript. As opposed to "has-a" composition patterns like [reactive
controllers](/docs/composition/controllers/), where a class can _own_ a controller to add
behavior, mixins implement "is-a" composition, where the mixin causes the class
itself to _be_ an instance of the behavior being shared.

You can use mixins to customize a Lit component by adding API or overriding its lifecycle callbacks.

## Mixin basics

Mixins can be thought of as "subclass factories" that override the class they
are applied to and return a subclass, extended with the behavior in the mixin.
Because mixins are implemented using standard JavaScript class expressions, they
can use all of the idioms available to subclassing, such as adding new
fields/methods, overriding existing superclass methods, and using `super`.

<div class="alert alert-info">

For ease of reading, the samples on this page elide some of the TypeScript types
for mixin functions. See [Mixins in TypeScript](#mixins-in-typescript) for details on proper
typing of mixins in TypeScript.

</div>

To define a mixin, write a function that takes a
`superClass`, and returns a new class that extends it, adding fields and methods
as needed:

```ts
const MyMixin = (superClass) => class extends superClass {
  /* class fields & methods to extend superClass with */
};
```

To apply a mixin, simply pass a class to generate a subclass with the mixin
applied. Most commonly, users will apply the mixin directly to a base class when defining
a new class:

```ts
class MyElement extends MyMixin(LitElement) {
  /* user code */
}
```

Mixins can also be used to create concrete subclasses that users can then extend
like a normal class, where the mixin is an implementation detail:

```ts
{'fraction_non_alphanumeric': 0.06025342642875614, 'fraction_numerical': 0.0012929919834497026, 'mean_word_length': 4.557471264367816, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2138913', 'n_tokens_mistral': 1042, 'n_tokens_neox': 992, 'n_words': 562}