Bug #98121
Updated by Helmut Hummel almost 2 years ago
When using the custom element <typo3-backend-icon>
with a JS framework, that renders the DOM (e.g. Vue https://github.com/vuejs/core/issues/3738 https://github.com/vuejs/core/issues/3792),
it can happen, that they set the properties of the custom element
instead of an attribute.
Since Lit does not reflect these properties to attributes by default,
but the icon-element relies on CSS set on the host element that depends
on the size attribute, the icon is not rendered in the correct size.
See: https://web.dev/custom-elements-best-practices/
on why reflecting properties to attributes might be a good idea
in some cases.
To reproduce put the following in a Fluid template of a backend module (TYPO3 12/ main):
<pre>
<f:be.pageRenderer includeJavaScriptModules="{0: '@typo3/backend/element/icon-element.js'}"/>
<div id="app" style="font-size: 8px"></div>
<script>
let icon = document.createElement('typo3-backend-icon');
icon.identifier = 'actions-search';
icon.size = 'large';
document.getElementById('app').appendChild(icon);
</script>
</pre>
Expected:
Large icon
Actual:
Very small icon
For TYPO3 11, the page renderer VH is different:
<pre>
<f:be.pageRenderer includeRequireJsModules="{0: 'TYPO3/CMS/Backend/Element/IconElement'}"/>
</pre>
The rest is the same