Problem/Motivation
When rendering Drupal render arrays to CustomElements via `setSlotFromRenderArray()`,
the `#attached` libraries are lost. The render array is processed through
`renderInIsolation()` which renders the HTML markup, but the attached libraries
(JS) are not captured in the CustomElement structure.
This is problematic for decoupled frontends that need to load Drupal JavaScript
libraries for functionality like:
- Form states/conditional fields (`core/drupal.states`)
- Autocomplete fields (`core/drupal.autocomplete`)
- Various widgets and behaviors
Proposed resolution
When rendering render arrays to custom elements, emit ``
elements as part of the slot content:
1. Capture `#attached` before rendering
2. Resolve library dependencies in correct load order
3. Generate `drupal-library-{name}` custom elements with JS file paths
4. Prepend library elements to slot content (before markup)
5. Include `drupalSettings` as props when present
Example output:
{
"element": "drupal-markup",
"slots": {
"default": [
{ "element": "drupal-library-core-jquery", "props": { "js": [...] } },
{ "element": "drupal-library-core-drupal-states", "props": { "js": [...] } },
"<div class=\"form-wrapper\">...</div>"
]
},
"props": { "drupalSettings": {...} }
}| Comment | File | Size | Author |
|---|---|---|---|
| #6 | 3568233-6-js-libraries-support.patch | 36.1 KB | ciprian.stavovei |
Issue fork custom_elements-3568233
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
ciprian.stavovei commentedComment #5
ciprian.stavovei commentedImplemented support for capturing #attached libraries when rendering render arrays to custom elements. The implementation:
- Captures attachments via BubbleableMetadata after rendering to include bubbled nested attachments
- Generates drupal-library-* custom elements with resolved JS file paths (CSS skipped intentionally)
- Prepends library elements to slot content before the markup
- Includes interface for testability and kernel tests
Pipeline is green and I also attached a patch in order to easily test this before merging.
Comment #6
ciprian.stavovei commentedComment #7
fagoThank you. I'm not so sure about adding attachhments to the ce-data model, that seems wrong and potentially confusing, since it's not possible to add attachments to the CE element. I need to take a closer look at this.
Comment #8
fago