TYPO3 Core

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):

<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>

Expected:

Large icon

Actual:

Very small icon

For TYPO3 11, the page renderer VH is different:

<f:be.pageRenderer includeRequireJsModules="{0: 'TYPO3/CMS/Backend/Element/IconElement'}"/>

The rest is the same