Adding isolated HTML without extra styles

Illia_Sakharau · December 4, 2024, 2:24pm

Goal:
Display an email message that comes in HTML format

Steps:

Added HTML component
Added HTML text to Content --> HTML. Text example:

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <style> <!-- Some styles --> </style>
  </head>
  <body style="background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none">
![Screenshot 2024-12-04 at 18.14.52|690x460](upload://7j3kHVzP9cs7HqjRa9CkCz4kCgJ.png)

  </body>
</html>

The problem
Retool’s HTML component wraps the content in a shadow DOM, but the Retool styles are still being passed into the shadow DOM (through :host) and applied to the email content, which affects its appearance.

Screenshots:

I didn't add this selectors

Question:
How I can if it’s possible to disable the passing of styles to the shadow DOM when using Retool’s HTML component?
Or do we have other ways to display the email properly?

Darren · December 17, 2024, 1:11am

Hi @Illia_Sakharau! Welcome to the community.

There's currently no native way to prevent the root window from passing down its styles when using the HTML component. I do think it's worth talking to the team about this, though, as I think there could be wider interest in such a feature.

In the meantime, you likely have a couple of options. The first solution that comes to mind is to overwrite those inherited styles using the all property, instead of having to overwrite them individually. I wasn't able to get this working in my initial testing, but I don't consider myself a CSS master by any means.

The other solution I thought of is probably overkill but definitely works - use a custom component to render the HTML content in a nested iframe.

I'll definitely talk to the team about baking in a native solution, but hopefully the above ends up being helpful. Let me know if you have any follow-up questions!