Phoenix LiveView 1.2 正式发布，核心新特性是支持在 HEEx 模板中并列（colocated）CSS，并借助 CSS @scope 规则实现组件级样式隔离，不过该规则因浏览器兼容性未默认启用。开发者需要手动配置编译选项来启用根标签属性标记。
背景与机制
LiveView 1.1 已支持并列 JavaScript 和 Hooks，1.2 将 CSS 纳入同一模型。开发者在 HEEx 模板的 <style :type={MyApp.ColocatedCSS}> 标签内编写 CSS，编译时 LiveView 会将其提取到 _build 目录下的专用文件夹，随后由 Tailwind 或 Esbuild 等打包工具处理。
要实现样式隔离，LiveView 通过编译时自动注入 phx-r 属性（需在 config.exs 中开启 :phoenix_live_view, root_tag_attribute: "phx-r"）标记每个模板的根元素。并列 CSS 会为组件根元素再添加一个唯一 phx-css-* 属性，从而在 @scope ([phx-css-foo]) to ([phx-r]) 规则下限定样式仅作用于当前组件内部的对应标签。例如，组件内的 <p> 会被加粗，而页面中来自其他组件的 <p> 不受影响。
不过，@scope 规则截至 2026 年 6 月仍非所有浏览器支持，因此 LiveView 1.2 未默认启用隔离，而是提供 @behaviour 接口让开发者自行实现自定义作用域策略（官方文档附带 @scope 示例供早期采用者参考）。
其他改进与生态影响
1.2 版本还包含多项小改进：HEEx 格式化器支持通过 TagFormatter 行为集成 Prettier 等工具处理 <script> 和 <style> 标签；Phoenix.LiveView.JS 结构体现在可随 push_event 自动编码（使用 Jason 或内置 JSON 模块）；HEEx 调试注解可按模块配置；JavaScript 客户端已有独立文档。这些改进进一步降低了组件化开发的耦合度，延续了 LiveView 在服务端渲染框架中保持前端开发体验的方向。
编注：信源为 Phoenix 官方框架博客，材料覆盖版本发布的技术细节与取舍，未涉及性能基准或与其他框架对比。