Element: <oj-bind-template-slot>

Oracle® JavaScript Extension Toolkit (JET)


  • 5.1.0
  • ojcomposite



Template Slot Binding

The oj-bind-template-slot element is used inside a composite View as a placeholder for stamped child DOM and is a declarative way to define a template slot. Similar to oj-bind-slot-elements, the oj-bind-template-slot has fallback content which should be provided in a template node and will be used when the template has no assigned nodes. The 'name' attribute on an oj-bind-template-slot follows the same rules as an oj-bind-slot where a template slot with a name attribute whose value is not the empty string is referred to as a named slot and a template slot without a name attribute or one whose name value is the empty string is referred to as the default slot where any composite children without a slot attribute will be moved to.

Template Slot Properties

  • A default template slot is a slot element whose slot name is the empty string or missing.
  • More than one template node can be assigned to the same template slot, but only the last will be used for stamping.
  • A template slot can also have a slot attribute and be assigned to another template slot or slot.
  • A template slot can have a default template as its direct child node which will be used to stamp DOM content if it has no assigned nodes. The binding context for the default template is the composite's binding context with the additional data properties.

Assignable Node Properties

  • Template nodes are the only allowed children of template slots.
  • Nodes with slot attributes will be assigned to the corresponding named slots (if present) and all other assignable nodes (Text or Element) will be assigned to the default slot (if present).
  • The slot attribute of a node is only applied once. If the View contains a composite and the node's assigned slot is a child of that composite, the slot attribute of the assigned slot is inherited for the slotting of that composite.
  • Nodes with slot attributes that reference slots not present in the View will not appear in the DOM.
  • If the View does not contain a default slot, nodes assigned to the default slot will not appear in the DOM.
  • Nodes that are not assigned to a slot will not appear in the DOM.

Binding Context

Unlike oj-bind-slot nodes whose children's bindings are resolved in the application's binding context before being slotted, oj-bind-template-slot children are resolved when the composite View bindings are applied and are resolved in the application's binding context extended with additional properties provided by the composite. These additional properties are available on the $current variable in the application provided template node and should be documented in the composite's slot metadata.

Example #1: Basic Usage

Note that the IDs are provided for sample purposes only.

Initial DOM

<demo-list data="{{groceryList}}" header="Groceries">
 <template slot="item" data-oj-as="groceryItem">
     <oj-option value="bought"><oj-bind-text value='[[groceryItem.value]]'></oj-bind-text><oj-option>


Note that if you want to build an HTML table using <oj-bind-for-each> element the html content must be parsed by HtmlUtils.stringToNodeArray() method. Keep in mind that the composite views and the oj-module views that are loaded via ModuleElementUtils are already using that method. Thus to create a table you can either place the content into a view or call HtmlUtils.stringToNodeArray() explicitly to process the content.

        <oj-bind-text value="[[$properties.header]]"></oj-bind-text>
    <oj-bind-for-each data="{{$properties.data}}">
            <!-- Template slot for list items with default template and alias -->
            <oj-bind-template-slot name="item" data={{$current.data}}>
              <!-- Default template -->
              <template data-oj-as="listItem">
                <span><oj-bind-text value='[[listItem.value]]'></oj-bind-text></span>



interface BindTemplateSlotElement<D>

Generic Parameters
DType of data to be provided to the template
Typescript Import Format
//To typecheck the element APIs, import as below.
import { BindTemplateSlotElement } from "ojs/ojcomposite";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojcomposite";

For additional information visit:


JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.


The oj-bind-template-slot default slot is used to specify a fallback template that will be used to stamp child DOM if the slot has no assigned template nodes. While assigned template nodes are executed in an extension of the composite element's binding context, the fallback template is executed in an extension of its own binding context (commonly the binding context of the composite view). As with assigned templated nodes, the extension makes the value of the data attribute available through $current and alias keys. The fallback content also inherits the slot attribute of the oj-bind-template-slot itself.


as :string

An optional alias for $current that can be referenced inside the default template DOM. Note that application $current aliasing should be done with the data-oj-as attribute on the template element.
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.

data :D

The object containing additional context variables to extend the stamped template nodes' binding context. These variables will be exposed as variables on $current and aliases.

name :string

The name of the slot.