The OWL, a JavaScript framework, utilizes a custom component framework. An owl slot is a placeholder that allows you to insert specific content in predetermined areas of a template. A slot is utilized to create generic components.
If you want to share content between a parent and child component in your templates, you can use slots. Slots facilitate the seamless passing of data from the parent component to the child component. For example, you can create a parent component that contains some content and use slots to make that content available to a child component.
Parent component:
<div>
<childComponent>
<span>Hello World</span>
</childComponent>
</div>
When we need to use the content of a parent component in a child component, we can achieve this by utilizing the default slot. By doing so, we can seamlessly call the parent component inside a child component, without any inconvenience. For example,
Child component:
<div class="childComponent">
<t t-slot="default"/>
<!-- Rest of the code -->
</div>
Any type of content, such as images and icons, can be passed from the parent component to the child component.
Named Slots
Named slots are a useful feature when designing templates that require multiple slots for different pieces of content. By assigning a specific name to each slot, we can easily differentiate and manage each content section. This can be particularly helpful in cases where there are varying content types and structures, offering a more efficient and organized approach.
To use a named slot, we can utilize the "t-set-slot" directive. For example, content is defined as
<div class="childComponent">
<div class="child-component-title">
<t t-slot="header_slot"/>
<span>Named Slots</span>
</div>
<div class="child-component-body">
<t t-slot="body_slot"/>
<p>Child Template Body</p>
</div>
</div>
You can use the t-set-slot directive to call it, as demonstrated below.
<div>
<childComponent>
<t t-set-slot="header_slot"/>
<p>Parent Template Content</p>
<t t-set-slot="body_slot">
<p>Parent Body Content</p>
</t>
</childComponent>
</div>
Default Slot
Not all slots are named slots. The remaining ones will be categorized as default slots.
Default Content
If no content is defined by the parent component, default content can be specified using slots.
For example,
<div t-name="Parent">
<Child/>
</div>
<span t-name="Child">
<t t-slot="default">default content</t>
</span>
Dynamic Slots
The t-slot directive provides a powerful feature of string interpolation that allows the usage of any expression. This means that you can dynamically insert expressions within a string by using the t-slot syntax, thereby enabling a wide range of possibilities for creating and manipulating dynamic text.
<t t-slot="{{expression}}" />When you use this feature, it will assess the current expression and substitute the t-slot directive with the appropriate slot that matches it.
Slots and Props
Slots are similar to props in that they pass content to child components. Owl has introduced a special prop slot that contains all slot information provided in the component, which can then be passed to the sub-component.
The prop slot that includes all the components is named the special prop slot and it appears like this:
{ slotName_1: slotInfo_1, ..., slotName_m: slotInfo_m }Also, we can pass slots to its sub-component like this:
<Child slots="props.slots"/>
Slot Params
When using the 't-set-slot' directive, you have the option to provide additional data in the form of a key/value pair. This allows you to attach more information to a slot beyond its initial value.
class Notebook extends Component {
static template = xml`
<div class="notebook">
<div class="tabs">
<t t-foreach="tabNames" t-as="tab" t-key="tab_index">
<span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab_index">
<t t-esc="props.slots[tab].title"/>
</span>
</t>
</div>
<div class="page">
<t t-slot="{{currentSlot}}"/>
</div>
</div>`;
setup() {
this.state = useState({ activeTab: 0 });
this.tabNames = Object.keys(this.props.slots);
}
get currentSlot() {
return this.tabNames[this.state.activeTab];
}
}Slot Scopes
The t-slot-scope attribute is used to define the scope of a slot within a template.
Defining a Slot: You define a slot in a template using the t-slot directive. For example:
<t t-name="your_layout">
<div class="content">
<t t-slot="content"/>
</div>
</t>
t-slot-scope: Sometimes, you might want to define a slot that can accept more complex content, including variables or other dynamic elements. In such cases, you can use t-slot-scope to define the scope of the slot and access variables or attributes from the calling template. Here's a simple example:
<t t-name="your_layout">
<div class="content">
<t t-slot="content" t-slot-scope="{title}">
<h1>Default Title</h1>
<p>Title from parent: <t t-esc="title"/></p>
</t>
</div>
</t>
In conclusion, OWL slots in Odoo offer a powerful mechanism for building dynamic and customizable user interfaces. By leveraging slots, developers can create reusable components that can be easily extended and overridden to suit various business requirements.