https://github.com/oscarmarina/morphable-mixin
Reset property to its initial value when attribute is removed
https://github.com/oscarmarina/morphable-mixin
Last synced: 3 months ago
JSON representation
Reset property to its initial value when attribute is removed
- Host: GitHub
- URL: https://github.com/oscarmarina/morphable-mixin
- Owner: oscarmarina
- Created: 2024-10-07T20:41:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-06T17:38:51.000Z (5 months ago)
- Last Synced: 2025-02-08T09:13:03.612Z (4 months ago)
- Language: JavaScript
- Homepage: https://dainty-fenglisu-56ec38.netlify.app/
- Size: 1.69 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This mixin ensures that the property is reset to its initial value when the attribute is removed.
It applies to properties that have `reflect: true` and works even with those initialized as undefined, null, or false.
- [https://github.com/lit/lit/issues/4643](https://github.com/lit/lit/issues/4643)
- [Making Lit Components Morphable](https://www.konnorrogers.com/posts/2024/making-lit-components-morphable)
- [augment the observed attributes to do something custom](https://lit.dev/playground/#gist=ab4b15cd9b2b8c5491c7a61fe3e262ad)
> [Playground demo](https://dainty-fenglisu-56ec38.netlify.app/)
## Key Use Cases:
1. **Attributes**: The `attributeChangedCallback` is called first:
```html
some light-dom
```
2. **No Attributes - properties with values**: The `attributeChangedCallback` is called first:
```html
some light-dom
```
```js
// Initial properties:
constructor() {
super();
this.message = 'Hiya';
this.count = 11;
this.active = false;
}
```
3. **No attributes, properties are undefined**: The `connectedCallback` is called first:
```html
some light-dom
```
```js
// Initial properties:
constructor() {
super();
this.message = undefined;
this.count = undefined;
this.active = false;
}
```
4. **Direct property setting**: If the property is set directly rather than through an attribute, such as:
```html
some light-dom
```
There is no straightforward way to determine the value used in the constructor. This is because
the property is set directly on the instance after it has been constructed, bypassing the attribute
reflection mechanism.