The Custom Elements module renders entities into custom elements markup that can be easily picked up for client-side
rendering, by various libraries. Moreover it provides API for other modules to customize the generated custom elements
or to render any data into 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 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
## Overview
## Frontend rendering
The module renders the data of all visible fields either as attribute to the custom element tag, or as nested tag with a
slot attribute. Custom element attributes may be picked up as property during client-side rendering.
Today's browsers provide [an API](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-autonomous-example)
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 with [Web components](https://developer.mozilla.org/de/docs/Web/Web_Components) or suiting frontend
frameworks, like [Vue.js](https://vuejs.org/).
Slots are a useful way for content distribution in [Vue.js - thus the rendered slots can be used directly by the Vue.js
[slot implementation](https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots). But the concept can
be used with other client-side libraries as well, e.g. see https://github.com/dschnare/react-slot for a React based
solution.
## Custom Element markup styles
## How it works
Custom elements use "slots" for handling content distribution, i.e. for passing nested content to an element. However, the
concrete syntax used for handling slots may differ by various frameworks. Thus, the module supports rendering to different
markup styles while it defaults to the Web component style syntax, which is supported by Vue 2 as well (via its legacy
slot syntax). In addition, the module supports the more [recent Vue2 and Vue 3](https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand)
syntax which can be enabled via config:
The module takes over render for all view-modes that are prefixed with `custom_elements` - thus to render content
entity as custom elements you just need to introduce custom view mode with `custom_elements` prefix. Every entity render
with such a view mode is then automatically processed.