Skip to content

Commit ab99a16

Browse files
committed
improve @target docs around not using decorators
1 parent 5f60201 commit ab99a16

1 file changed

Lines changed: 22 additions & 11 deletions

File tree

docs/_guide/targets.md

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

139139
### What about without Decorators?
140140

141-
If you're using decorators, then the `@target` and `@targets` decorators will turn the decorated properties into getters.
141+
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:
142142

143-
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:
143+
```js
144+
import {controller, target, targets} from '@github/catalyst'
145+
146+
controller(class HelloWorldElement extends HTMLElement {
147+
// The same as `@target output`
148+
[target.static] = ['output']
149+
150+
// The same as `@targets pages; @targets links`
151+
[targets.static] = ['pages', 'links']
152+
153+
})
154+
```
155+
156+
This is functionally identical to:
144157

145158
```js
146-
import {findTarget, findTargets} from '@github/catalyst'
147-
class HelloWorldElement extends HTMLElement {
159+
import {controller} from '@github/catalyst'
148160

149-
get output() {
150-
return findTarget(this, 'output')
151-
}
161+
@controller
162+
class HelloWorldElement extends HTMLElement {
163+
@target output
152164

153-
get pages() {
154-
return findTargets(this, 'pages')
155-
}
165+
@targets pages
166+
@targets links
156167

157168
}
158-
```
169+
```

0 commit comments

Comments
 (0)