Page styles

A page can have its own stylesheet, and it reaches the Markdown it renders.

@Component({
  selector: 'app-button-page',
  templateMD,
  styleUrl: './button.page.css',
})
export class ButtonPage {}

/* button.page.css */
table {
  font-size: 0.92rem;
}

Why it works

Angular scopes a component's CSS with an _ngcontent-* attribute that only its own template nodes carry. Blasdoc's nodes are not part of that template, so the renderer copies the attribute onto every node it creates — elements, headings, tables, list items and component hosts alike.

It stays scoped

The scope is Angular's own, so another page's stylesheet does not reach this one, and this one does not leak out. Nothing global is introduced.

What the scope does not cover

The scope is an attribute on nodes, so:

• A page that ships no styles has no scope to carry — correct, and nothing to do.

• :host in a page stylesheet applies to the page element itself, not to the Markdown inside it.

• ::ng-deep is unnecessary: the nodes are already scoped, so plain selectors reach them.

Styling the content globally

For typography that every page shares, use the theme's content styles rather than a per-page sheet:

<main blasdocContentStyles>
  <router-outlet />
</main>

That applies the --blasdoc-* typography, tables, lists and callouts. See Theming.