You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-3Lines changed: 15 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -80,13 +80,19 @@ In order for GlimmerX entities to be interpretable by Glint, you currently need
80
80
81
81
#### Component Signatures
82
82
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.
84
88
85
89
```ts
86
90
import Component from '@glint/environment-glimmerx/component';
87
91
import { hbs } from '@glimmerx/component';
88
92
89
93
export interface ShoutSignature {
94
+
// We have a `<div>` as our root element
95
+
Element: HTMLDivElement;
90
96
// We accept one required argument, `message`
91
97
Args: {
92
98
message: string;
@@ -103,11 +109,15 @@ export class Shout extends Component<ShoutSignature> {
103
109
}
104
110
105
111
public static template = hbs`
106
-
{{yield this.louderPlease}}
112
+
<div ...attributes>
113
+
{{yield this.louderPlease}}
114
+
</div>
107
115
`;
108
116
}
109
117
```
110
118
119
+
[yieldable named blocks rfc]: https://github.com/emberjs/rfcs/blob/master/text/0460-yieldable-named-blocks.md
120
+
111
121
### With Ember.js
112
122
113
123
#### Import Paths
@@ -123,14 +133,16 @@ In order for GlimmerX entities to be interpretable by Glint, you currently need
123
133
124
134
#### Component Signatures
125
135
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.
127
137
128
138
```ts
129
139
// app/components/super-table.ts
130
140
131
141
import Component from '@glint/environment-glimmerx/glimmer-component';
0 commit comments