Work With Custom Web Components

Oracle JET web components are reusable pieces of user interface code that you can embed as custom HTML elements. Web components can contain JET components, other web components, HTML, JavaScript, and CSS. You can create your own web component or add one from Oracle Component Exchange for use in your application's pages.

To use web components in your pages, you can import them as a ZIP archive, or simply install them from the Component Exchange associated with your VB Studio instance. Similarly, web components that you create can be published to a Component Exchange to share with other developers, or shared as a ZIP archive.

Web components that have been imported into your web app show in the Resources node in the Navigator:
Description of component-navigator.png follows
Description of the illustration component-navigator.png

A web component must contain the following files. It may also contain additional files and folders, for example, a SCSS file or resources such as translation files. For a more detailed description of the JET web component architecture, see About Web Components in Developing Oracle JET Apps Using MVVM Architecture.

File	Description
`loader.js`	A RequireJS module that defines the web component dependencies for its metadata, View, ViewModel, and CSS. The naming convention for web components requires that the name of the file is `loader.js`.
`component.json`	A web component metadata file that defines its available properties and methods. The naming convention for web components requires that the name of the file is `component.js`.
`view.html`	The view for the web component
`viewModel.js`	Describes the ViewModel for the web component where methods defined in the web component metadata are defined
`styles.css`	Contains the custom styling for this web component

Note:

Web components are currently not backward-compatible. When importing web components, and when upgrading web components or your app, you need to ensure that your application and all web components that you use in your application are using the same version of JET.