CSS renders correctly in .base files but breaks when embedded with ```base code block in a page

Custom CSS & Theme Design
1

Steps to reproduce

  1. Create a .base file containing a table template with CSS styling (progress bars / colors).
  2. Verify the .base file renders correctly when opened directly.
  3. Embed the template inside another page using a code block:
```base
...template content...
```
  1. Observe the rendered result inside the page.

Did you follow the troubleshooting guide? Y

Expected result

The embedded ```base block should render with the same CSS styling and layout as when the template is viewed directly in the .base file.

Specifically:

  • progress bars render correctly
  • colors match the defined CSS
  • layout and spacing are consistent with the .base file view

Actual result

When the template is embedded using a ```base code block inside a page:

  • CSS styling is not applied correctly
  • progress bar colors render incorrectly
  • layout and visual styles differ from the .base file rendering

The same template renders perfectly when opened as a .base file, but appears visually broken when embedded in a page.

Environment

(Paste your debug info here from Show debug info)

Additional information

This issue seems to occur specifically when rendering .base templates inside markdown pages via code block embedding.

Screenshots showing the difference:

Correct rendering inside .base file

(attach screenshot)

Broken rendering when embedded in page

(attach screenshot)

The CSS itself appears correct, since it works in the .base file context.

It seems the CSS scope or rendering environment for ```base blocks may differ from .base files.

2

You can press Cmd + Opt + I / Ctrl + Shift + I in Obsidian to open DevTools and inspect the structure.

There, you’ll see that there are three structures to take into account for bases. You’ll have to write your selectors accordingly.

  1. Bases embedded via ![example.base] have the classes .internal-embed.bases-embed.
  2. Bases embedded via code block have the classes .block-language-base.bases-embed.

Directly under those are the header, search-row, view, etc.

  1. In a base file, the largest container that identifies it as a base is probably the div with [data-type="bases"].

Directly under that is the page’s .view-content before you get to the header, search-row, view, etc.

My explaining any more here won’t do as much good as your opening DevTools and looking around to see for yourself.