Problem/Motivation
Web components are becoming more popular
Web components allow you to create custom HTML elements
Custom elements and attributes are not able to be whitelisted
For structured content you can output the custom element in a twig template
However for some components it would be great to use the built-in Drupal rewrite functionality to map multiple items to a specific custom element
The rewrite functionality runs through the filterAdminXss which doesn't provide a way to pass allowlisted attributes
I've not found the cleanest way to implement this, but as components become more widely used this will need a more accessible way to safely allow web components to be used in rewrites and other places on a Drupal site
See attached views config for view with rewrite.
Here is the html that is output by the view:
<div class="view-content">
<div class="views-row"><div class="views-field views-field-title">
<span class="field-content">test basic page </span>
</div></div>
</div>
Here is the expected output:
<div class="view-content">
<div class="views-row"><div class="views-field views-field-title">
<span class="field-content"><nic-component>test basic page </nic-component></span>
</div></div>
</div>
Steps to reproduce
See attached view config.
- Fresh install
- Add basic page to site
- Create new view
- Create page display of content
- Unformatted list of fields
- Edit title field
- Override output of this field with custom text
- Enter: {{ title__value }}
- Apply
- Save
Proposed resolution
Provide a way to allowlist views rewrite custom html elements.
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | views.view_.test.yml | 5.09 KB | nicxvan |
Comments
Comment #2
nicxvan commentedI'm looking for input on how this can be solved long term, there are security considerations.
Additional questions are around how you'd embed a custom element in a CKEditor field as a source.Adding it to the list of available html still strips the element out as well
This works in CKEditor 5
Comment #3
nicxvan commentedComment #5
nicxvan commentedAfter retesting with ckeditor 5, if you allow list the custom element then you can add it to the ckeditor source and it is no longer stripped out.
This remains an issue with views rewrites.
Comment #6
wim leers🥳
Could you please share a config export of a minimal view that triggers this problem? 🙏 (It doesn't need to load the actual web component — for the purpose of this issue/bug report AFAICT it's sufficient to observe
<nic-webcomponent>to be present in the views rewrite but absent in the user-facing output).Comment #7
nicxvan commentedI've added steps to reproduce, and example of the view and actual output vs expected output to the issue summary.
Let me know if there is anything else to look at next.
Comment #8
wim leersThanks, will try to reproduce next week to narrow down 👍
Comment #9
wim leers1 month later, didn't happen. And just got reassigned to a new project, so … definitely won't have time. 😬 Sorry.