Embedded diagram marble offset and font size

[cvuorinen]

When using the embedded diagram in a reveal.js html slides the styles etc. somehow make the marbles appear offset to the right and also the font size off the text values inside the marbles is too big (or actually it's not set at all so the styles from outside "leak" in and make it too big).

Here is a screenshot:

[cvuorinen]

In a blank html page without any styles or other markup the embedded diagram works fine, so I was able to get around this issue by using them through an iframe from the slides.

[staltz]

This is probably some global styles affecting the diagram. It looks like typical CSS namespacing problem. Could also be fixed by using the Shadow DOM with the <rx-marbles> element.

[nadavwr]

rx-marbles {
    font-size: 16px;
    text-align: left;
}

should fix it