Scoping CSS to showcase styled components

I am building a style guide using Grav. I'd like to show examples of styled components by referencing an external stylesheet—but without override the Grav's own styles. Something like:

Here is an example of preferred table styling:

(Show html code)

(Show styled example using above html combined with external css)

In other words, the scope of the style would be limited to the component examples. I initially thought iframes for each example was the way to go. That's probably untenable.

Can anyone think of a better way to build this concept?

Don't think its possible without the iframe, only if you add maybe a custom class infront of the external css and then you call it here that could work?

Thank you for the response. I do think a custom class is the way to go.