The term "CSS Isolation" used by this topic is mean to isolate the content of HTML files against other parts of Obsidian, not mean the isolation CSS property or CSS isolation Property, they are totally different concepts.

In the viewpoint of this plugin "HTML Reader", it has to load the content of a HTML file to a content view element of Obsidian. Without CSS Isolation, the CSS styles of HTML files would affect overall Obsidian, so you may see some font faces become ugly or Obsidian's layouts might be disarranged.

There are some approaches can apply CSS Isolation:

1. Shadow DOM
2. <iframe>
3. CSS isolating packages

Each approach has its pros and cons.

In my evaluating results inside Obsidian, I got:

1. "Shadow DOM" approach would has less side effects.
2. <iframe> approach is almost perfect but internal links cannot work normally.
3. Cannot find any properly CSS isolating package to apply.

Therefore, I take "Shadow DOM" as the main implementation technology of CSS isolation mechanism for Obsidian before version 1.0.7.

When I was developing the version 1.0.7, I found the right way to overcome the unusable internal links of <iframe>, so I decide to take <iframe> as the main implementation technology of CSS isolation mechanism for Obsidian after version 1.0.7.

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM.

There are some bits of shadow DOM terminology to be aware of:

• Shadow host: The regular DOM node that the shadow DOM is attached to.

• Shadow tree: The DOM tree inside the shadow DOM.

• Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.

• Shadow root: The root node of the shadow tree.

  — from Using shadow DOM - Web Components | MDN

The code used in obsidian-html-plugin 1.0.6:

const contentDiv = this.contentEl.createDiv();
contentDiv.setAttribute( 'style', 'transform: scale(1);' );
const shadow = contentDiv.attachShadow( {mode: 'open'} );
shadow.addEventListener( 'click', sdFixAnchorClickHandler );
...

let domW = parserW.parseFromString( cleanHtmlText, 'text/html', { includeShadowRoots: true } );

...
shadow.appendChild( domW.documentElement );

The contentDiv.setAttribute( 'style', 'transform: scale(1);' ); would occupy isolating the CSS styles inside the Shadow Root. That means Shadow DOM cannot isolate all CSS styles very well.

The event handler sdFixAnchorClickHandler would scroll to the internal link target anchors while clicking them. Because the internal links inside Obsidian would be added some prefix string before "#".

Side effects:

1. Some CSS effects cannot work properly
   1. :target pseudo-class event would never be fired (the target anchor is scrolled into, so the :target would never be fired!)
      • Finally, I found the right way to overcome this side effect, it would be resolved after version 1.0.7.

1. Encapsulating Style and Structure with Shadow DOM by Caleb Williams
2. Scoping CSS using Shadow DOM by Viduni Wickramarachchi
3. It's hard to overcome the troubles of global CSS by Jesse Luoto
4. Shadow DOM ：獨立的Web組件 by 叡揚資訊

The internal links (e.g. <a href="#cite_note1">) would be blocked inside <iframe> on the Obsidian platform. The error message from Developer Console:

chrome-error://chromewebdata/:1 
- Refused to display 'app://obsidian.md/' in a frame because it set 'X-Frame-Options' to 'deny'.

The internal links would be inserted extra string "app://obsidian.md/index.html" before "#" by Obsidian desktop version, so the error message contains this address. Although I cannot find any way to fix it, finally I get another way to bypass it, and take the same workaround for Shadow DOM and re-write the sdFixAnchorClickHandler for scrolling to internal link target anchors or jumping to target.

Another issue is the external links, some of them have different actions to open the hyperlinks. It seems that the Obsidian force open the external links by the system default browser, instead of opening by itself. The default action of opening external links inside <iframe> is opening them inside <iframe>, instead of opening by the system default browser. The workaround is:

1. Add <base target='_blank'> to <head>
2. Modify <a target='_self'> to <a target='_blank'>

Some similar issues:

1. Html ‘a’ tags target get overwritten in preview mode

1. Content-Security-Policy
2. X-Frame-Options
3. iframe 與 window.open 黑魔法 by Huli

I have tried to evaluating some CSS isolating packages.

Cleanslate site

Cleanslate is an extreme CSS reset stylesheet. It is used to reset the styling of an HTML element and all its children, back to default CSS values. It is composed exclusively of !important rules, which override all other types of rules.

It does not require any JavaScript – it’s just a CSS stylesheet. However, you may find it useful when used within JavaScript widgets, such as those created by Sqwidget.

This package reset many CSS styles to their default values, that means many CSS visual effects would different with original pages.

Bootstrap Isolated site

Isolated precompiled BootstrapCSS

<link rel="stylesheet" href="bootstrap-iso.css">

Outside HTML no Bootstrap affected
<div class="bootstrap-iso">
  Inside HTML where Bootstrap works
</div>
Outside HTML no Bootstrap affected

This package add class "bootstrap-iso" to encapsulated <div> tag to let CSS styles isolated against other parts of HTML content. The original CSS styles of this package are come from "Bootstrap" and "Twitter" websites, that means many CSS visual effects would different with original pages.