Custom Elements: a presentation contract

Elements, properties and slots connect Drupal displays with frontend components.

A name, properties and slots

element identifies the component; props contains values such as title and link; slots contains filtered editorial HTML or nested elements. This is different from exposing all entity properties.

CE displays and view modes

Drupal configures fields and formatters for each view mode. The same node has distinct full-page and teaser contracts because they serve different presentation needs.

No Web Components requirement

Custom Elements can serialise markup or JSON. Our copy uses explicit JSON with React, without browser custom-tag registration or Shadow DOM.

Shared contract, clear responsibilities

A stable contract simplifies the renderer and reduces duplicated decisions. New elements still need frontend implementations; Drupal CSS and JS libraries are not transported automatically.

Explore the explanation and real example