Embedding pre-formatted HTML+CSS without the theme effecting it

Help
1

I’m trying to embed a preformatted scientific paper into my website, without interference from my website’s theme. The article is comprised of HTML and CSS content generated from a LaTeX manuscript, which I want to render exactly as-is.

My website’s theme ends up styling parts of that article’s HTML content, which I’m trying to avoid. For example, the theme’s stylesheet has rules for link formatting that are more specific than those specified by the article.scss, so they take precedence.

I made a new layout for my article’s page, which just includes the common site header. Unfortuantely, to style that header, I still need to include my theme’s scss, so simply skipping that isn’t an option. But apart from that header, the rest of the page content should just be the article’s HTML as-is (well, with some sizing/padding rules to center it on the page), with its own article.scss for styling it.

What’s the best way to embed this article’s HTML and CSS on a “clean slate”?

One approach to fix this was to find all the offending theme rules, and add new more-specific rules like .article p { font-size: unset; }, etc. This was annoying but worked decently well on my first go at this, but unfortunately, it totally breaks when I change the theme: some of those “reset rules” become obsolete, and other new ones need to be made for the new theme’s quirks.

An iframe came to mind, but that gave me a “you’re doing it wrong” feeling. Is there a native CSS way to say something like “this tag and its children belong to their new isolated context, with their own set of styles”?

2

Cross-post: How can I embed prestyled HTML with being effected by the surrounding CSS? - Stack Overflow

3

An iframe is wrong for seo reasons, otherwise it is fine.

1 Like
4

Using Declarative Shadow DOM worked great. Kudos to Xylobyte.

e.g.

<style> p { color: red; } </style>
<p>This will be red</p>

<template shadowrootmode="open">
  <style>p {text-decoration: underline}</style>
  <p>Text in shadow DOM and not affected by red</p>
</template>
1 Like