Custom elements
Custom elements modules allows to render content entities as custom elements.
Overview
Renders entities into custom elements markup that can be picked up for client-side rendering. It 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.
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. But the concept can be used with out client-side libraries as well, e.g. see https://github.com/dschnare/react-slot for a React based solution.
How it works
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.
In order to make client-side rendering possible, the necessary client libraries may be added to the custom_elements/main library, which the module is attaching to custom element markup.
Example
Example of rendered paragraph entity of bundle text
containing four fields:
field_list_integer
integer list field type (simple/scalar field)
field_float
float field type (simple/scalar field)
field_link
link field type (complex field)
field_text
formatted text field type (complex field)
Output:
<pg-text type="text" data-field_list_integer="value-1" data-field_float="1.123">
<section name="field_link">
<div class="field field--name-field-link field--type-link field--label-above">
<div class="field__label">link</div>
<div class="field__item"><a href="http://google.sk">link text</a></div>
</div>
</section>
<section name="field_text">
<div class="clearfix text-formatted field field--name-field-text field--type-text-long field--label-above">
<div class="field__label">Text</div>
<div class="field__item"><p>test text</p></div>
</div>
</section>
</pg-text>
Field types considered as simple/scalar
The following list contains field types which are considered simple (or scalar) and are processed as data attributes:
General fields:
Boolean - boolean
Date - datetime
Email - email
Timestamp - timestamp
Text fields:
Text (plain) - string
List (text) - list_string
Text (plain, long) - string_long
Numeric fields:
Number (float) - float
List (integer) - list_integer
List (float) - list_float
Number (decimal) - decimal
Number (integer) - integer
Other field types as considered as complex fields and are rendered within
<section>
tag.
Credits
- Österreichischer Wirtschaftsverlag GmbH: Initiator, Sponsor
- drunomics GmbH: Concept, Development, Maintenance