We have built a low-code app, and one specific page contains some additional information. That information is pasted as custom HTML content into a web component.
In order to make streamline look & feel, we'd like to use the same CSS file as DataMiner is using across all low-code apps. Is there a way to refer to the DataMiner CSS file?
We tried making a ref from the custom HTML, but unsure if that file is actually easily accessible from within the custom HTML. Next, we did also take the content of the CSS file and added that into the custom HTML. That seems to work fine when just showing the HTML stand-alone in a browser, but when adding that into the web component of a low-code app, the layout seems to be broken.
The input of the Web component does indeed get sanitized, however, internal css through <style> tags is not considered unsafe. It does get stripped though when the first element of the html is the style tag. I would consider this an issue.
You can workaround this issue for now by placing your <style>...</style> anywhere else but the first element in the html.
Next to the internal css, inline css will also work, and might be less prone to surprises: The entire <style> tag will get stripped if it contains one potential risk (eg a background-image), so you lose the style of everything in that case. When using inline css, you'll lose only the style on one specific element when it would contain styles that are considered unsafe.
But I would not advise against the use of internal css, as it's way more easy to maintain/adjust.
I quickly tested if it is possible to reference the CSS file, but it seems like the 'link' tag get sanitized away as well, to prevent from potential malicious CSS.