Custom Elements

The Custom Elements module provides the framework for rendering Drupal data (entities, fields, ...) into custom elements markup. Custom elements can be easily rendered by frontend components, e.g. via web components or various Javascript frontend frameworks. This enables Drupal to render into high-level theme components, while the actually rendering of the components is handled by a frontend application (possibly in the browser).

The Custom Elements module provides

• the UI to configure the custom element output for entities by view-mode (3.x only)
• the API to build a (nested tree) of custom element objects, with associated cache metadata
• the API to serialize a tree of custom objects into markup or into a JSON representation
• the API for other modules to customize how data is rendered into custom elements via custom element processors

Frontend rendering

Today's browsers provide an API for developers to define their own HTML elements, like <flag-icon country="nl"></flag-icon>. Besides that, many frontend frameworks render their components using the same, or similar custom elements syntax. That way, we can render a custom element output by Drupal with Web components or any component-oriented frontend
framework, like Vue.js or React.

Example

This is how twitter paragraph could look like:

<paragraph-twitter src="https://x.com/the_real_fago/status/1559907161328738304" title="The title"></paragraph-twitter>

Then a frontend framework could implement a suiting component with src and title attributes for rendering. Please refer to the Lupus Decoupled docs for a more complete example.

How to use it

The module can be used for progressively rendering individual entities via custom elements by using respective view-modes. Together with the Lupus Custom Elements Renderer module it may be used to fully decouple the frontend.

The easiest way to get started is to use Lupus Decoupled Drupal, which provides an easy to use, fully decoupled out-of-the-box setup with Custom Elements.

For more information and example usage, please refer to the Lupus Decoupled Documentation.

Optional features

• Custom elements UI: Configure custom-elements output by entity view mode (3.x only)
• Canvas and Canvas ExtJS support: Supports rendering canvas pages into custom elements (3.x only)
• Thunder integration: Module that provides an example setup for Thunder paragraphs

Related modules

• The module forms the core of Lupus Decoupled Drupal, which provides an easy to use, fully decoupled out-of-the-box setup with Custom Elements.
• Lupus Custom Elements Renderer - Switches the main content renderer to provide API responses using custom elements markup or a custom elements json serialization.

Status

• Version 3.x is recommended and contains more features
• Version 2.x is receives security and critical bug fixes only. Upgrade to 3.x!
• 1.x is (long) obsolete and not supported anymore.

Contribute

• Reach out at #lupus-decoupled @ Drupal Slack!