Skip to content

Commit 75f7ea6

Browse files
committed
improve @target docs around not using decorators
1 parent ce9556f commit 75f7ea6

File tree

1 file changed

+22
-11
lines changed

1 file changed

+22
-11
lines changed

docs/_guide/targets.md

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -136,21 +136,32 @@ Important to note here is that nodes from the `shadowRoot` get returned _first_.
136136

137137
### What about without Decorators?
138138

139-
If you're using decorators, then the `@target` and `@targets` decorators will turn the decorated properties into getters.
139+
If you're not using decorators, then the `@target` and `@targets` decorators have an escape hatch: you can define a static class field using the `[target.static]` computed property, as an array of key names. Like so:
140140

141-
If you're not using decorators, then you'll need to make a `getter`, and call `findTarget(this, key)` or `findTargets(this, key)` in the getter, for example:
141+
```js
142+
import {controller, target, targets} from '@github/catalyst'
143+
144+
controller(class HelloWorldElement extends HTMLElement {
145+
// The same as `@target output`
146+
[target.static] = ['output']
147+
148+
// The same as `@targets pages; @targets links`
149+
[targets.static] = ['pages', 'links']
150+
151+
})
152+
```
153+
154+
This is functionally identical to:
142155

143156
```js
144-
import {findTarget, findTargets} from '@github/catalyst'
145-
class HelloWorldElement extends HTMLElement {
157+
import {controller} from '@github/catalyst'
146158

147-
get output() {
148-
return findTarget(this, 'output')
149-
}
159+
@controller
160+
class HelloWorldElement extends HTMLElement {
161+
@target output
150162

151-
get pages() {
152-
return findTargets(this, 'pages')
153-
}
163+
@targets pages
164+
@targets links
154165

155166
}
156-
```
167+
```

0 commit comments

Comments
 (0)