Improve default template and make markup fields compatible with Vue scopes by default.

custom_elements.module

@@ -59,13 +59,18 @@ function template_preprocess_custom_elements(&$variables) {
   /** @var \Drupal\Core\Entity\ContentEntityBase $entity */
   $entity = $variables['elements']['#entity'];
   $variables['#attached']['library'][] = 'custom_elements/main';
+
+  // By default use the prefix 'pg' for paragraphs and the bundle as tag name.
+  $variables['tag_prefix'] = $entity->getEntityTypeId() == 'paragraph' ? 'pg' : $entity->getEntityTypeId();
+  $variables['tag'] = $entity->bundle();
+
+  // Add the bundle as type.
   $variables['type'] = $entity->bundle();
-  $variables['name'] = $entity->bundle();
+
   $view_mode = $variables['elements']['#view_mode'];
   /** @var \Drupal\custom_elements\Service\VariablePreprocessor $variable_preprocessor */
   $variable_preprocessor = \Drupal::service('custom_elements.variable_preprocessor');
   $entity_values = $variable_preprocessor->preprocessVariables($entity, $view_mode);
-  $variables['data_attributes'] = new Attribute($entity_values->getDataAttributes());
+  $variables['attributes'] = new Attribute($entity_values->getDataAttributes());
   $variables['fields'] = $entity_values->getFieldValues();
-  $variables['tag'] = $entity_values->getHtmlTag();
 }

src/EntityValues.php

@@ -48,25 +48,6 @@ class EntityValues {
     return strip_tags($value);
   }
 
-  /**
-   * Gets HTML tag.
-   *
-   * @return string
-   */
-  public function getHtmlTag() {
-    return $this->tag;
-  }
-
-  /**
-   * Sets HTML tag.
-   *
-   * @param string $tag
-   *   HTML tag.
-   */
-  public function setHtmlTag($tag) {
-    $this->tag = $tag;
-  }
-
   /**
    * Gets data attributes.
    *

src/Service/VariablePreprocessor.php

@@ -52,24 +52,6 @@ class VariablePreprocessor {
     $this->renderer = $renderer;
   }
 
-  /**
-   * Get html tag based on entity type.
-   *
-   * @param \Drupal\Core\Entity\ContentEntityInterface $entity
-   *   Entity to get tag for.
-   *
-   * @return string
-   *   HTML tag.
-   */
-  protected function getHtmlTag(ContentEntityInterface $entity) {
-    $entityType = $entity->getEntityTypeId();
-    switch ($entityType) {
-      case 'paragraph':
-        return 'pg';
-    }
-    return $entityType;
-  }
-
   /**
    * Preprocess entity to extract data attributes and field values.
    *
@@ -83,7 +65,6 @@ class VariablePreprocessor {
    */
   public function preprocessVariables(ContentEntityInterface $entity, $viewMode) {
     $entityValues = new EntityValues();
-    $entityValues->setHtmlTag($this->getHtmlTag($entity));
     /** @var \Drupal\Core\Field\FieldItemListInterface[] $fields */
     $fields = $entity->getFields();
     foreach ($fields as $field) {

templates/custom-elements.html.twig

@@ -4,17 +4,19 @@
  * Default theme implementation for displaying an custom elements entity.
  *
  * Available variables:
- * - tag: HTML tag for current entity.
- * - name: Label of paragraph type turned to lowercase.
- * - type: Type of paragraph.
- * - data-attributes: Scalar field values.
- * - fields: Rendered field values.
+ * - tag_prefix: Prefix to use for the html tag.
+ * - tag: HTML tag to use for the entity.
+ * - type: Type of the custom element; usually determined by the entity bundle.
+ * - attributes: The attributes to add to the tag. Includes data-attributes
+ *   added by the preprocessors.
+ * - fields: Rendered markup fields that are not in data-attributes.
  *
  * @ingroup themeable
  */
 #}
-<{{ tag }}-{{ name }} type="{{ type }}" {{ data_attributes }}>
+
+<{{ tag_prefix }}-{{ tag }} type="{{ type }}" {{ attributes.addClass('custom-elements') }}>
   {% for field_name,field_value in fields %}
-    <section name="{{ field_name }}">{{ field_value }}</section>
+    <section scope="{{ field_name }}">{{ field_value }}</section>
   {% endfor %}
-</{{ tag }}-{{ name }}>
+</{{ tag_prefix }}-{{ tag }}>