LiveView 1.2.0 现已可用！要从 LiveView 1.1 更新到 1.2，只需在你的 mix.exs 文件中更新版本要求并重新获取依赖项： { :phoenix_live_view , "~> 1.2.0" } 在 LiveView 1.1 中，我们引入了同位挂钩和同位 JavaScript，允许你直接在任何 HEEx 模板中编写挂钩。LiveView 1.2 在 Phoenix.LiveView.ColocatedJS 的基础工作上进行了扩展，允许你在 HEEx 中同位 CSS。 def table ( assigns ) do ~H""" < style :type = { MyApp.ColocatedCSS } > thead { color : ... ; } tbody , tr : hover { ... } </ style > < table > ... </ table > """ end 与同位 JS 一样，:type 属性告诉 LiveView 在编译时将标签的内容提取到你的 _build 目录中的特殊 phoenix-colocated 文件夹。这会被你的打包工具（通常是 Tailwind 或 Esbuild）拾取并处理为你正常的 CSS 流水线的一部分。不过，这只是简单的部分。通常，当定义同位样式时，你想要的是将其作用范围限制在特定组件内，以免意外应用到页面上其他组件的其它元素。现代 CSS 引入了相对较新的 @scope 规则，它可以帮助我们实现这一点，但有一些注意事项。 @scope 规则为 @scope (scope root) to (scope limit) { /* … */ } 该规则接受一个根选择器和一个可选的限制选择器。如果我们能够注解呈现的 HTML 以包含一个唯一属性来标识模板的“根”及其结束位置，我们就可以有仅适用于该模板的规则。由于我们控制 HEEx 如何编译为 HTML，因此我们可以做到这一点。让我们看一个例子： attr :description , :string slot :item def my_list ( assigns ) do ~H""" < style :type = { MyApp.ColocatedCSS } > p { font - weight : bold ; } </ style > < div > < p > { @description } </ p > < ul > < li :for = { item <- @item } > { render_slot ( @item ) } </ li > </ ul > </ div > """ end 当我们在另一个模板中使用这个组件时，比如在你的 LiveView 的 render/1 函数中， < p > 你好，世界 </ p > < .my_list description = " 我的列表 " > < :item > < p > 项目 1 </ p > </ :item > < :item > 项目 2 </ :item > </ .my_list > 未修改的渲染 HTML 大致如下： < p > 你好，世界 </ p > < div > < p > 我的列表 </ p > < ul > < li > < p > 项目 1 </ p > </ li > < li > 项目 2 </ li > </ ul > </ div > 现在，为了正确识别属于 my_list 组件的 HTML 部分，我们需要注解所有模板的边界： < p phx-r > 你好，世界 </ p > < div phx-r phx-css-foo > < p > 我的列表 </ p > < ul > < li > < p phx-r > 项目 1 </ p > </ li > < li > 项目 2 </ li > </ ul > </ div > 我们使用一个特殊的 phx-r 属性，该属性添加到模板的所有最外层元素上，可作为 @scope 规则中的限制选择器。注意，在上面的示例中我们使用了一个插槽。 <p>项目 1</p> 不属于 my_list 的模板，而是属于调用者。因此，它也被视为一个“根”，并且获得了 phx-r 属性。然后，由于 my_list 使用了作用域同位 CSS，它的根元素（在这个例子中只有一个）也会获得一个唯一的 phx-css-* 属性。结合起来，这样我们就能够编写以下 CSS： @scope ( [ phx-css-foo ] ) to ( [ phx-r ] ) { p { font-weight : bold ; } } 通过这个规则，仅属于 my_list 模板的 p 标签将会被渲染为粗体，而页面上的任何其他 p 标签都不会受到影响。LiveView 不会自动注入 phx-r 属性。相反，它是通过一个新的编译时配置选择性的添加： 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 中的一些小改进 除了同位 CSS，LiveView 1.2 还包括一些小改进：你现在可以实现一个 Phoenix.LiveView.HTMLFormatter.TagFormatter 行为，以在 HEEx 中格式化 <script> 和 <style> 标签。