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

admin管理员组

文章数量:1221766

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.

This is just a simple GitHub Pages site that's statically generated by Jekyll, but this question is more general than that. I'm using a a third party theme that styles just about everything and works really well on most pages, where I just provide dumb MarkDown content for it to style and present.

On this article's page, I want to use the common site header (so I need the theme.scss, I can't just skip it for that page), but the rest of the page content should just be the article's HTML as-is, 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"?

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.

This is just a simple GitHub Pages site that's statically generated by Jekyll, but this question is more general than that. I'm using a a third party theme that styles just about everything and works really well on most pages, where I just provide dumb MarkDown content for it to style and present.

On this article's page, I want to use the common site header (so I need the theme.scss, I can't just skip it for that page), but the rest of the page content should just be the article's HTML as-is, 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"?

• html
• css
• iframe
• jekyll

Share Improve this question Follow edited Feb 7 at 18:08 Alexander asked Feb 7 at 17:36 AlexanderAlexander 63.3k1313 gold badges105105 silver badges167167 bronze badges 3

• Look at this stackoverflow.com/questions/25837429/… Its got the right principles you need to follow – JulesUK Commented Feb 7 at 18:11
• Hey @JulesUK, if I understand that correctly, is that a variant of the "add new more-specific rules" approach I mentioned? The challenge with that is that I don't know which styles I'm implicitly relying on (from the current theme or browser), which might change when I switch to a new theme. In other words, it worked well on one theme, but changing the theme lead me to discover which styles of the prev theme I was relying on, but didn't know it until it changed. – Alexander Commented Feb 7 at 18:16
• For a concrete example, it turns out that the auto-generated CSS didn't specify a margin-left on list items, so it ends up as whatever the browser defaults to. My previous theme didn't set it, so it kept that 15px browser default and looked okay. Turns out my new theme does define margin-left: 30px, which is now more indented than intended. – Alexander Commented Feb 7 at 18:19

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I believe the most appropriate approach is to use the Shadow DOM, which can be done from pure HTML like so:

p { color: red; }

<p>Text red</p>

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

Alternatively, you can also use JS to dynamically load content in your Shadow DOM.

I hope that can help you.

本文标签： How can I embed prestyled HTML with being effected by the surrounding CSSStack Overflow