Phoenix LiveView 1.2 Ships Colocated CSS Without Browser @scope Default

Steffen Deusch and the Phoenix team cut LiveView 1.2 with colocated CSS that scopes styles to a component's rendered HTML—but they deliberately ship it without the @scope rule turned on by default. June 2026 browser support for @scope is still too thin to bet the framework on.

Colocated CSS Gets Compile-Time Extraction and Attribute-Based Scoping Write a <style> tag with a :type="css" attribute directly inside any HEEx template and LiveView extracts it at compile time into a phoenix-colocated folder in _build. Your bundler (Tailwind, Esbuild) picks it up as part of the normal CSS pipeline. To scope those styles, LiveView annotates each template's outermost elements with a phx-r attribute (opt-in via config:phoenix_live_view, root_tag_attribute: "phx-r") and assigns a unique phx-css-* attribute to the component root. Combined with the @scope ( ) to ( ) rule, only p tags inside that component's template get bolded—caller content (like slots) keeps its own phx-r and stays untouched.

No Default Scoping—Instead a @behaviour for Custom Strategies Rather than betting on a still-sporty CSS spec, LiveView 1.2 ships a Phoenix.LiveView.ColocatedCSS behaviour. You implement your own scoping strategy (e.g., class-based, attribute-based, or using @scope if you're an early adopter). The team published the @scope implementation in the docs for those who want to live on the edge. The underlying HEEx compilation had to be split into separate tokenization and parsing steps to handle macro components like colocated CSS and JS without complicating the rest of the pipeline—that refactor is detailed in a separate technical deep dive.

Smaller Changes That Matter: TagFormatter, JS Encoding, Debug Annotations LiveView 1.2 also brings Phoenix.LiveView.HTMLFormatter.TagFormatter so you can format <style> and <script> tags with Prettier or any tool of your choice. Phoenix.LiveView.JS structs now auto-encode when sent via push_event if you're using Jason or the built-in JSON module; you can also call JS.to_encodable/1 to get a string manually. HEEx debug annotations are configurable per module with @debug_heex_annotations and @debug_attributes module attributes, and test warnings can be categorized. The JavaScript client now has its own documentation separate from the main LiveView docs. Colocated CSS in LiveView 1.2 gives Elixir developers a path to scoped component styles that doesn't depend on a CSS-in-JS library—but the framework-level decision to leave @scope off by default keeps the upgrade path honest about what browsers actually support today.

Source: Phoenix LiveView 1.2 Released
Domain: phoenixframework.org