Skip to content

Commit d5c2ce9

Browse files
committed
Describe signatures' Element field in the README
1 parent 245dab7 commit d5c2ce9

File tree

1 file changed

+15
-3
lines changed

1 file changed

+15
-3
lines changed

README.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,19 @@ In order for GlimmerX entities to be interpretable by Glint, you currently need
8080

8181
#### Component Signatures
8282

83-
While GlimmerX components accept `Args` as a type parameter, the Glint version accepts `Signature`, which contains types for `Args` and `Yields`.
83+
While GlimmerX components accept `Args` as a type parameter, the Glint version accepts `Signature`, which contains types for `Element`, `Args` and `Yields`.
84+
85+
The `Element` field declares what the component's root element is, in order to ensure any modifiers attached to your component will be compatible with the element they're ultimately attached to. If no `Element` is specified, it will be a type error to set any HTML attributes when invoking your component.
86+
87+
The `Yields` field specifies the names of any blocks the component yields to, as well as the type of any parameter(s) they'll receive. See the [Yieldable Named Blocks RFC] for further details.
8488

8589
```ts
8690
import Component from '@glint/environment-glimmerx/component';
8791
import { hbs } from '@glimmerx/component';
8892
8993
export interface ShoutSignature {
94+
// We have a `<div>` as our root element
95+
Element: HTMLDivElement;
9096
// We accept one required argument, `message`
9197
Args: {
9298
message: string;
@@ -103,11 +109,15 @@ export class Shout extends Component<ShoutSignature> {
103109
}
104110

105111
public static template = hbs`
106-
{{yield this.louderPlease}}
112+
<div ...attributes>
113+
{{yield this.louderPlease}}
114+
</div>
107115
`;
108116
}
109117
```
110118

119+
[yieldable named blocks rfc]: https://github.com/emberjs/rfcs/blob/master/text/0460-yieldable-named-blocks.md
120+
111121
### With Ember.js
112122

113123
#### Import Paths
@@ -123,14 +133,16 @@ In order for GlimmerX entities to be interpretable by Glint, you currently need
123133

124134
#### Component Signatures
125135

126-
While Glimmer components accept `Args` as a type parameter, and Ember components accept no type parameters at all, the Glint version of each accepts `Signature`, which contains types for `Args` and `Yields`.
136+
While Glimmer components accept `Args` as a type parameter, and Ember components accept no type parameters at all, the Glint version of each accepts `Signature`, which contains types for `Element`, `Args` and `Yields`. These three fields behave in the same way as they do for GlimmerX components, detailed above in that [Component Signatures](#component-signatures) section.
127137

128138
```ts
129139
// app/components/super-table.ts
130140
131141
import Component from '@glint/environment-glimmerx/glimmer-component';
132142
133143
export interface SuperTableSignature<T> {
144+
// We have a `<table>` as our root element
145+
Element: HTMLTableElement;
134146
// We accept an array of items, one per row
135147
Args: {
136148
items: Array<T>;

0 commit comments

Comments
 (0)