By fago on
Change record status: 
Published (View all published change records)
Project: 
Custom Elements
Introduced in branch: 
3.x
Introduced in version: 
3.3
Issue links: 
https://www.drupal.org/node/3555044
Description: 

Custom Elements 3.3 introduces a new explicit JSON format that clearly separates props and
slots, eliminating ambiguity in API responses.

Before (Legacy format):

{
    "element": "article-teaser",
    "title": "Title",
    "image": {"element": "image", "src": "/img.jpg"},
    "content": "<p>Body</p>"
  }

After (Explicit format):

{
    "element": "article-teaser",
    "props": {
      "title": "Title"
    },
    "slots": {
      "default": "<p>Body</p>",
      "image": {"element": "image", "props": {"src": "/img.jpg"}}
    }
  }

For new installations, the explicit format is the new default! It can be changed via the new settings screen.

Updating to 3.3

Existing installations:

No immediate action required. The modules automatically uses legacy format via update hook.

How to update to explicit format

Existing sites:

  1. Switch via:
    • Admin > Configuration > System > Custom Elements
    • Change "JSON serialization format" from "Legacy" to "Explicit"
    • For Nuxt.js: Update to nuxtjs-drupal-ce 2.5+ - it supports explicit format
Impacts: 
Site builders, administrators, editors
Module developers
Themers