Element: <oj-defer>

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 4.0.0
Module:
  • ojdefer

The oj-defer custom element delays applying bindings to its children until it is activated. It works by disconnecting child elements from the DOM tree until the parent component activates its subtree. In addition, the tag will defer binding execution and disconnect children within hidden subtrees of the components which support it. There are several components which support oj-defer:

  • Collapsible
  • Dialog
  • Film Strip
  • Off Canvas
  • Popup
  • MasonryLayout
  • Menu
  • Composite Component Slots

<oj-defer> only defers applying bindings to its contents, it does not defer the loading of JavaScript modules needed to fully instantiate the DOM. For example, while <oj-defer> can defer applying bindings to an <oj-button> element, the containing page must still aggresively load the "ojs/ojbutton" module for the component to be created. Using an <oj-module> within an <oj-defer> offers a way to additionally defer the loading of JavaScript modules; any modules needed to instantiate the view of the <oj-module> will not be loaded until bindings are applied to the <oj-module> by the containing <oj-defer>.

Note: For composite component slots, the oj-defer element could have a slot attribute specified directly on it, i.e. <oj-defer slot="something">, or <oj-defer> could appear within a child subtree of the element with a slot attribute. Also, the current implementation may allow bindings to be applied to the content within <oj-defer> prematurely if the tag is used in one of the 'hiding' components that is nested within another 'hiding' component. That limitation will be removed in the future.


Usage

Signature:

interface DeferElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { DeferElement } from "ojs/ojdefer";

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

For additional information visit: