iframe CSS is applied to the snapdom wrapper.

[wesbos]

When rendering an iframes iframe.contentDocument.documentElement, any inline CSS can be applied to the wrapper.

For example, we have the css of div { 10px solid red; }, which is applied to the wrapper div you inset into the SVG element.

I think if we apply CSS all: unset; to that div, it will fix it. But I can't seem to find out how to target that div or inject that CSS?

Demo: (click the Capture Document Element) https://codepen.io/wesbos/pen/qENpKPp

[wesbos]

I was able to inject this CSS into our iframe which targeted that div. Perhaps we can put an ID on it?

Might be the most cursed CSS i've ever written

  foreignObject div:has(> html) {
    all: unset;
  }

[tinchox5]

Thank you @wesbos I'm trying to find a solution