1# ContentSlot 2 3The **ContentSlot** component is a component designed to render and manage components created on the native layer using C APIs. 4 5With support for hybrid development, the **ContentSlot** component is recommended when the container is an ArkTS component and the child component is created on the native side. 6 7> **NOTE** 8> 9> The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version. 10 11## APIs 12 13ContentSlot(content: Content) 14 15Called when content is added to a placeholder component 16 17**Atomic service API**: This API can be used in atomic services since API version 12. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name | Type| Mandatory| Description | 24| ------- | -------- | ---- | ------------------------------------------------------------ | 25| content | [Content](#content) | Yes | Manager of the **ContentSlot** component. Through the APIs provided by the native side, it can register and trigger the attach and detach event callbacks for **ContentSlot**, as well as manage the child components of **ContentSlot**.| 26 27## Content 28 29type Content = Content 30 31Defines a base class for **ComponentContent** and **NodeContent**. 32 33**Atomic service API**: This API can be used in atomic services since API version 12. 34 35**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37| Type| Description | 38| ---- | ------------------------------------------------------------ | 39| [Content](../js-apis-arkui-Content.md) | Base class for **ComponentContent** and **NodeContent**.| 40 41## Example 42 43The following example shows the basic usage of **ContentSlot**. 44 45```ts 46import { nativeNode } from'libNativeNode.so' // .so file you implemented 47import { NodeContent } from '@kit.ArkUI' 48 49@Entry 50@Component 51struct Parent { 52 private nodeContent: Content = new NodeContent(); 53 54 aboutToAppear() { 55 // Create a node through the C API and add it to the nodeContent manager. 56 nativeNode.createNativeNode(this.nodeContent); 57 } 58 59 build() { 60 Column() { 61 // Display the native components stored in the nodeContent manager. 62 ContentSlot(this.nodeContent) 63 } 64 } 65} 66``` 67 68 69