Skip to content

docs: clarify using defineObservedAttributes usage #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
koddsson merged 1 commit into from
Feb 10, 2021
Merged

docs: clarify using defineObservedAttributes usage #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions docs/_guide/attrs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,12 +175,12 @@ class HelloWorldElement extends HTMLElement {

### What about without Decorators?

If you're not using decorators, then you won't be able to use the `@attr` decorator, but there is still a way to achieve the same result. Under the hood `@attr` simply tags a field, but `initializeAttrs` does all of the logic.
If you're not using decorators, then you won't be able to use the `@attr` decorator, but there is still a way to achieve the same result. Under the hood `@attr` simply tags a field, but `initializeAttrs` and `defineObservedAttributes` do all of the logic.

Calling `initializeAttrs` in your connected callback, with the list of properties you'd like to initialize can achieve the same result. The class fields can still be defined in your class, and they'll be overridden as described above. For example:
Calling `initializeAttrs` in your connected callback, with the list of properties you'd like to initialize, and calling `defineObservedAttributes` with the class, can achieve the same result as `@attr`. The class fields can still be defined in your class, and they'll be overridden as described above. For example:

```js
import {initializeAttrs} from '@github/catalyst'
import {initializeAttrs, defineObservedAttributes} from '@github/catalyst'

class HelloWorldElement extends HTMLElement {
foo = 1
Expand All @@ -190,6 +190,7 @@ class HelloWorldElement extends HTMLElement {
}

}
defineObservedAttributes(HelloWorldElement, ['foo'])
```

This example is functionally identical to:
Expand Down