@@ -5,12 +5,14 @@ Previous versions (< 3.0.0) implemented the v0 proposal, which was only implemen
5
5
6
6
## Usage
7
7
8
- Import ` register ` and call it with your component, a tag name<strong >\ * </strong >, and a list of attribute names you want to observe:
8
+ Import ` register ` and call it with your component, a tag name<strong >* </strong >, and a list of attribute names you want to observe:
9
9
10
10
``` javascript
11
11
import register from ' preact-custom-element' ;
12
12
13
- const Greeting = ({ name = ' World' }) => < p> Hello, {name}! < / p> ;
13
+ const Greeting = ({ name = ' World' }) => (
14
+ < p> Hello, {name}! < / p>
15
+ );
14
16
15
17
register (Greeting, ' x-greeting' , [' name' ]);
16
18
```
@@ -40,15 +42,15 @@ import register from 'preact-custom-element';
40
42
41
43
// <x-greeting name="Bo"></x-greeting>
42
44
class Greeting extends Component {
43
- // Register as <x-greeting>:
44
- static tagName = ' x-greeting' ;
45
+ // Register as <x-greeting>:
46
+ static tagName = ' x-greeting' ;
45
47
46
- // Track these attributes:
47
- static observedAttributes = [' name' ];
48
+ // Track these attributes:
49
+ static observedAttributes = [' name' ];
48
50
49
- render ({ name }) {
50
- return < p> Hello, {name}! < / p> ;
51
- }
51
+ render ({ name }) {
52
+ return < p> Hello, {name}! < / p> ;
53
+ }
52
54
}
53
55
register (Greeting);
54
56
```
@@ -58,19 +60,16 @@ If no `observedAttributes` are specified, they will be inferred from the keys of
58
60
``` js
59
61
// Other option: use PropTypes:
60
62
function FullName (props ) {
61
- return (
62
- < span>
63
- {props .first } {props .last }
64
- < / span>
65
- );
63
+ return < span> {props .first } {props .last }< / span>
66
64
}
67
65
FullName .propTypes = {
68
- first: Object , // you can use PropTypes, or this
69
- last: Object , // trick to define untyped props.
66
+ first: Object , // you can use PropTypes, or this
67
+ last: Object // trick to define untyped props.
70
68
};
71
69
register (FullName, ' full-name' );
72
70
```
73
71
72
+
74
73
## Related
75
74
76
- [ preact-shadow-dom] ( https://github.com/bspaulding/preact-shadow-dom )
75
+ [ preact-shadow-dom] ( https://github.com/bspaulding/preact-shadow-dom )
0 commit comments