`<style>` outside a component has no scope

Why this fires¶

A scoped <style> belongs to the component fn that surrounds it: the fn's class stamp is what its selectors are scoped to. In a top-level statement or an impl/trait method there is no component, so there is no scope to belong to — and before this error existed, such a declaration either rendered raw CSS in place (static body) or crashed at runtime (a body with @(), whose compiler marker is not a real function).

use std::html::{style}

let s = <style>.x { color: red }</style>
// error[TE736]: `<style>` outside a component has no scope; add `global` or move it into a component

Fix it¶

Either opt out of scoping — a static <style global> outside a component is accepted and renders in place:

let s = <style global>body { margin: 0 }</style>

— or move the declaration into a component fn, where it hoists and scopes normally:

fn Card() -> View {
    <div class="card">
        <style>.card { color: red }</style>
    </div>
}

A body containing @(expr) reports TE736 outside a component even under global: its values need a component root element to ride, and there is none.

See also¶

• TE731 — runtime children requires global.
• TE737 — @() with no root element to carry its value.