Phoenix LiveView 1.2 版本发布：支持同位置 CSS 及多项小改进！

【Phoenix LiveView 1.2 版本发布】LiveView 1.2.0 版本于 2026 年 6 月 10 日推出作者是 Steffen Deusch。要从 LiveView 1.1 升级到 1.2只需在 mix.exs 文件中更新版本要求然后重新获取依赖项elixir {:phoenix_live_view, ~ 1.2.0}【同位置 CSS】在 LiveView 1.1 版本中引入了同位置钩子和同位置 JavaScript允许在任何 HEEx 模板中编写钩子。LiveView 1.2 基于 Phoenix.LiveView.ColocatedJS 的基础工作也支持在 HEEx 中使用同位置 CSS。elixir def table(assigns) do ~H ... end和同位置 JS 一样:type 属性会告知 LiveView 在编译时将标签内容提取到 _build 目录下的一个特殊 phoenix-colocated 文件夹中。随后这个文件夹会被打包工具处理并作为常规 CSS 流程的一部分。不过在定义同位置样式时通常希望对其进行作用域限定以免意外应用到页面上其他组件的元素。现代 CSS 有一个相对较新的 scope 规则它能帮助实现这一点但也有一些注意事项。【scope 规则】css scope (scope root) to (scope limit) { /* … */ }scope 规则接受一个根选择器和一个可选的限制选择器。如果能在渲染的 HTML 中添加一个唯一属性来标识模板的 “根” 及其结束位置就可以让规则仅应用于该模板。由于可以控制 HEEx 如何编译成 HTML所以能够做到这一点。下面来看一个例子elixir attr :description, :string slot :item def my_list(assigns) do ~H{description}{render_slot(item)} end当在另一个模板中使用这个组件时比如在 LiveView 的 render/1 函数中elixirHello World.my_list descriptionMy List :itemItem 1/:item :item Item 2 /:item /.my_list未经修改的渲染 HTML 大致如下htmlHello WorldMy ListItem 1Item 2现在为了准确识别属于 my_list 组件的 HTML 部分需要对所有模板的边界进行标注htmlHello WorldMy ListItem 1Item 2使用了一个特殊的 phx-r 属性它会被添加到模板的所有最外层元素上并且可以在 scope 规则中用作限制选择器。注意在上面的例子中使用了插槽。Item 1 并不属于 my_list 模板而是属于调用者。因此它也被视为一个 “根”并添加了 phx-r 属性。然后由于 my_list 使用了作用域限定的同位置 CSS其根元素在这个例子中只有一个也会获得一个唯一的 phx-css-* 属性。综合起来可以编写以下 CSScss scope ([phx-css-foo]) to ([phx-r]) { p { font-weight: bold; } }有了这个规则只有属于 my_list 模板的 p 标签会以粗体显示而页面上的其他 p 标签则不受影响。LiveView 不会自动注入 phx-r 属性。相反它需要通过一个新的编译时配置来启用elixir config :phoenix_live_view, # 设置在所有根标签上的属性用于 Phoenix.LiveView.ColocatedCSS root_tag_attribute: phx-r在实现同位置 CSS 时遇到了一个问题需要重新审视 HEEx 模板的编译方式。为了让同位置 CSS 正常工作不得不改变 HEEx 模板的编译方式将编译过程拆分为单独的分词和解析步骤这样就可以处理宏组件同位置 CSS 和 JS而不会让其余的编译过程变得更复杂。这也让能够重用之前在模板编译和格式化之间重复的代码。【默认不提供作用域限定功能】尽管为同位置 CSS 付出了很多努力但 LiveView 1.2 实际上并没有提供作用域限定功能。原因是在 2026 年 6 月scope 规则在各浏览器中的支持情况还不太理想。相反提供了一个 behaviour可以通过实现它来进行自定义作用域限定也允许使用不同的策略。如果想成为早期采用者文档中有 scope 的实现示例。【1.2 版本的一些小改进】除了同位置 CSSLiveView 1.2 还包含了一些小改进现在可以实现 Phoenix.LiveView.HTMLFormatter.TagFormatter 行为使用选择的工具来格式化 HEEx 中的