1# slot
2
3>  **NOTE**
4>
5>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
6
7
8## Default Slot
9
10You can use the **\<slot>** tag to create a slot inside a custom component to fill the content defined in the parent component. The sample code is as follows:
11
12```html
13<!-- comp.hml -->
14<div class="item">
15   <text class="text-style">The following uses the content defined in the parent component.</text>
16   <slot></slot>
17</div>
18```
19
20The following references the custom component:
21```html
22<!-- xxx.hml -->
23 <element name='comp' src='../common/component/comp.hml'></element>
24 <div class="container">
25   <comp>
26     <text class="text-style">Content defined in the parent component</text>
27   </comp>
28 </div>
29```
30
31
32## Named Slot
33
34When multiple slots are need inside a custom component, you can name them, so that you can specify the slot in which you want to fill content by setting the **\<name>** attribute.
35
36```html
37<!-- comp.hml -->
38<div class="item">
39   <text class="text-style">The following uses the content defined in the parent component.</text>
40   <slot name="first"></slot>
41   <slot name="second"></slot>
42</div>
43```
44
45The following references the custom component:
46```html
47<!-- xxx.hml -->
48 <element name='comp' src='../common/component/comp.hml'></element>
49 <div class="container">
50   <comp>
51     <text class="text-style" slot="second">Fill in the second slot.</text>
52     <text class="text-style" slot="sfirst">Fill in the first slot.</text>
53   </comp>
54 </div>
55```
56
57>  **NOTE**
58>
59>  **\<name>** and **\<slot>** do not support dynamic data binding.
60