class ComponentElement

Same name in this branch
  1. 11.x core/lib/Drupal/Core/Render/Element/ComponentElement.php \Drupal\Core\Render\Element\ComponentElement
Same name and namespace in other branches
  1. 10 core/modules/sdc/src/Element/ComponentElement.php \Drupal\sdc\Element\ComponentElement
  2. 10 core/lib/Drupal/Core/Render/Element/ComponentElement.php \Drupal\Core\Render\Element\ComponentElement

Provides a Single Directory Component render element.


  • #component: The machine name of the component.
  • #props: an associative array where the keys are the names of the component props, and the values are the prop values.
  • #slots: an associative array where the keys are the slot names, and the values are the slot values. Expected slot values are renderable arrays.
  • #propsAlter: an array of trusted callbacks. These are used to prepare the context. Typical uses include replacing tokens in props.
  • #slotsAlter: an array of trusted callbacks to alter the render array in #slots.

Usage Example:

$build['component'] = [
    '#type' => 'component',
    '#component' => 'olivero:button',

Plugin annotation



Expanded class hierarchy of ComponentElement

See also


10 #type uses of ComponentElement
ComponentRenderTest::checkEmbedWithNested in core/modules/sdc/tests/src/Kernel/ComponentRenderTest.php
Render a card with slots that include a CTA component.
ComponentRenderTest::checkEmbedWithNested in core/tests/Drupal/KernelTests/Components/ComponentRenderTest.php
Render a card with slots that include a CTA component.
ComponentRenderTest::checkEmptyProps in core/modules/sdc/tests/src/Kernel/ComponentRenderTest.php
Ensure that components can have 0 props.
ComponentRenderTest::checkEmptyProps in core/tests/Drupal/KernelTests/Components/ComponentRenderTest.php
Ensure that components can have 0 props.
ComponentRenderTest::checkInvalidSlot in core/modules/sdc/tests/src/Kernel/ComponentRenderTest.php
Ensure that the slots throw an error for invalid slots.

... See full list


core/modules/sdc/src/Element/ComponentElement.php, line 37


View source
class ComponentElement extends RenderElement {
    use DoTrustedCallbackTrait;
     * Expands a sdc into an inline template with an attachment.
     * @param array $element
     *   The element to process. See main class documentation for properties.
     * @return array
     *   The form element.
     * @throws \Drupal\sdc\Exception\InvalidComponentDataException
    public function preRenderComponent(array $element) : array {
        $props = $element['#props'];
        $props_alter_callbacks = $element['#propsAlter'];
        // This callback can be used to prepare the context. For instance to replace
        // tokens in the props.
        $props = array_reduce($props_alter_callbacks, fn(array $carry, callable $callback) => $this->doTrustedCallback($callback, [
        ], '%s is not trusted'), $props);
        $inline_template = $this->generateComponentTemplate($element['#component'], $element['#slots'], $element['#slotsAlter'], $props);
        $element['inline-template'] = [
            '#type' => 'inline_template',
            '#template' => $inline_template,
            '#context' => $props,
        return $element;
     * Generates the template to render the component.
     * @param string $id
     *   The component id.
     * @param array $slots
     *   The contents of any potential embed blocks.
     * @param array $slots_alter_callbacks
     *   The potential callables for altering slots.
     * @param array $context
     *   Inline template context.
     * @return string
     *   The template.
     * @throws \Drupal\sdc\Exception\InvalidComponentDataException
     *   When slots are not render arrays.
    private function generateComponentTemplate(string $id, array $slots, array $slots_alter_callbacks, array &$context) : string {
        $template = '{# This template was dynamically generated by sdc #}' . PHP_EOL;
        $template .= sprintf('{%% embed \'%s\' %%}', $id);
        $template .= PHP_EOL;
        foreach ($slots as $slot_name => $slot_value) {
            if (\is_scalar($slot_value)) {
                $slot_value = [
                    "#plain_text" => (string) $slot_value,
            if (!Utilities::isRenderArray($slot_value)) {
                $message = sprintf('Unable to render component "%s". A render array or a scalar is expected for the slot "%s" when using the render element with the "#slots" property', $id, $slot_name);
                throw new InvalidComponentDataException($message);
            $context[$slot_name] = array_reduce($slots_alter_callbacks, fn(array $carry, callable $callback) => $this->doTrustedCallback($callback, [
            ], '%s is not trusted'), $slot_value);
            $template .= "  {% block {$slot_name} %}" . PHP_EOL . "    {{ {$slot_name} }}" . PHP_EOL . "  {% endblock %}" . PHP_EOL;
        $template .= '{% endembed %}' . PHP_EOL;
        return $template;
     * {@inheritdoc}
    public function getInfo() : array {
        return [
            '#pre_render' => [
            '#component' => '',
            '#props' => [],
            '#slots' => [],
            '#propsAlter' => [],
            '#slotsAlter' => [],



Title Sort descending Modifiers Object type Summary Overriden Title Overrides
ComponentElement::generateComponentTemplate private function Generates the template to render the component.
ComponentElement::getInfo public function Returns the element properties for this element. Overrides ElementInterface::getInfo
ComponentElement::preRenderComponent public function Expands a sdc into an inline template with an attachment.
DoTrustedCallbackTrait::doTrustedCallback public function Performs a callback.
PluginInspectionInterface::getPluginDefinition public function Gets the definition of the plugin implementation. 6
PluginInspectionInterface::getPluginId public function Gets the plugin_id of the plugin instance. 2
RenderElement::preRenderAjaxForm public static function Adds Ajax information about an element to communicate with JavaScript. Overrides RenderElementBase::preRenderAjaxForm
RenderElement::preRenderGroup public static function Adds members of this group as actual elements for rendering. Overrides RenderElementBase::preRenderGroup
RenderElement::processAjaxForm public static function Form element processing handler for the #ajax form property. Overrides RenderElementBase::processAjaxForm
RenderElement::processGroup public static function Arranges elements into groups. Overrides RenderElementBase::processGroup
RenderElement::setAttributes public static function Sets a form element's class attribute. Overrides RenderElementBase::setAttributes
RenderElement::__construct public function 1

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.