There are two types of elements you can create:
Widget-specific elements belong to a specific widget type and cannot be used by any other widget type.
Stand-alone elements are widgets that are not tied to a specific widget type and can be used by multiple widget types.
As part of their configuration, elements define the widgets they can be placed on, either implicitly (in the case of widget-specific elements) or explicitly (in the case of stand-alone elements). Widgets can contain both widget-specific and stand-alone elements as necessary. Business users can re-arrange, show, or hide elements of both types using the tools in the Design tab without the need for coding knowledge.
While it is not a hard and fast rule, the primary difference between widget-specific elements and stand-alone elements is in the location of the JavaScript on which they depend. For widget-specific elements, the JavaScript is typically contained in the parent widget’s <widget-type>.js file. In this case, the element functions as a display mechanism for functionality that exists in the parent widget. Removing an element of this type from a widget on the Design tab does not alter the functionality of the parent widget; it just removes the element from the widget’s display.
Stand-alone elements typically have their own JavaScript functionality that is not dependent on any single widget. As such, they can be fully encapsulated, making it possible to share them among multiple widgets. Adding a stand-alone element to a widget adds additional JavaScript functionality to the widget, along with display mechanisms for that functionality. Note that, if you have an existing widget, you can add a stand-alone element to it without the need to upload the whole widget again.
For a widget-specific element, you do not need to explicitly specify that it belongs to its parent widget because you place the element’s configuration and code underneath the parent widget’s directory. For stand-alone elements, you do need to explicitly define which widgets can use the element. The Create the element directory structure and Define element meta-data in element.json sections provide more details on these topics.
Choosing which kind of element to create depends on the purpose of the element. For example, if you need to create a “today-element” to be used across multiple widgets, the wise choice would be to create a stand-alone element and calculate today’s date within that element’s JavaScript rather than rely on each widget to provide the date calculation functionality.
