<style>

<style> without scoped is global CSS in the .meeko file of the component that needs it. It passes through the same PostCSS as app/styles/main.css (postcss.config.*, Tailwind, Meeko utilities) and Vite bundles it with the component, but its rules apply to the entire page: children, html="…" content and any other component with the same class.

Use it for intentionally global styles, with your own prefix. For almost everything else, <style scoped> is the default choice.

Usage#

<!-- app/components/MarkdownView.meeko -->
<script lang="ts">
import type { TrustedHtml } from "@meekojs/meeko";

const props = defineProps<{ content: TrustedHtml }>();
</script>

<template>
  <article class="markdown-view" html="props.content"></article>
</template>

<style>
/* Global by design: the .markdown-view prefix avoids affecting the rest of the page. */
.markdown-view p { margin-block: 0.75em; }
.markdown-view pre { overflow-x: auto; }
</style>

Type#

<style>
.markdown-view p { … }
</style>

Attributes#

A component accepts one style block: two <style> blocks, even if one is scoped, produce MEEK004: Sección <style> duplicada.

Result#

• CSS. The rules as written, after PostCSS: no scope attribute is added and :global(…) is not transformed.
• SSR. The document links the page components' CSS in <head>, so styles are present on the first render.
• Navigation. Client navigation loads each route's CSS when entering it. Once loaded, it keeps applying when navigating to other routes, and its order relative to other stylesheets depends on when it was loaded.

Examples#

Styles for third-party content#

A component wrapping a widget or HTML it does not control applies global styles with a prefix:

<!-- app/components/CodeBlock.meeko -->
<script lang="ts">
import type { TrustedHtml } from "@meekojs/meeko";

const props = defineProps<{ highlighted: TrustedHtml }>();
</script>

<template><div class="code-block" html="props.highlighted"></div></template>

<style>
.code-block .line { display: block; min-height: 1lh; }
.code-block .line.highlighted { background: color-mix(in oklab, currentColor 8%, transparent); }
</style>

Tailwind and layers#

The block passes through the application's PostCSS, so it accepts Tailwind directives if the project uses Tailwind:

<template><nav class="site-nav">…</nav></template>

<style>
@layer components {
  .site-nav { display: flex; gap: 1rem; }
  .site-nav a[aria-current="page"] { font-weight: 700; }
}
</style>

Common mistakes#

Use :global(…) in a <style> without scoped#

:global is only transformed in <style scoped>. Here it reaches the browser unchanged; the browser does not understand it and discards the rule without any error.

<style>
.card :global(.icon) { width: 1rem; }
</style>

<style scoped>
.card :global(.icon) { width: 1rem; }
</style>

A generic selector without a prefix#

A common class in a global <style> affects all components that use it, in the order their stylesheets were loaded: the result changes depending on the entry route.

<style>
.card { padding: 2rem; }
</style>

<style scoped>
.card { padding: 2rem; }
</style>

Two style blocks#

<style scoped>
.a { color: red; }
</style>
<style>
.b { color: blue; }
</style>

MEEK004: Sección <style> duplicada. Use a <style scoped> with :global(…) for the global part.

<style scoped>
.a { color: red; }
:global(.b) { color: blue; }
</style>

Notes#

• Scope. A global <style> is not limited to when the component is mounted: once loaded, it applies to the entire page until you reload it.
• Where to put global styles. Resets, tokens and typography belong in app/styles/main.css (or a file it imports), where their order is explicit. <style> in a component is for global styles that only exist if that component is in the application.
• Performance. Vite bundles CSS per route: a component only used in one section does not add its styles to others until you visit them.
• CSP. In the build, component CSS arrives as linked .css files, not inline <style> tags: a CSP with style-src 'self' allows them.
• Checking. meeko check does not validate CSS in a <style> without scoped; PostCSS and Vite process it in meeko dev and meeko build.

Related#

• <style scoped>Component scoped styles, limited to its template elements with a data-meeko-s attribute, and :global(…) to escape the scope.
• htmlFills an element with unescaped HTML from an expression, which must be marked as trusted with trustHtml.
• cssComponent style options, such as which elements receive the scoped style attribute, all elements or only those that some selector can match.
• Component styles: <style> and <style scoped>Meeko API