凤凰直播1.2发布

凤凰直播1.2发布！发布者：Steffen Deusch，2026 年 6 月 10 日 LiveView 1.2.0 现已推出！要从 LiveView 1.1 更新到 1.2，只需更新 mix.exs 文件中的版本要求并重新获取依赖项： { :phoenix_live_view , "~> 1.2.0" } 共置 CSS 在 LiveView 1.1 中，我们引入了共置 Hooks 和共置 JavaScript ，允许您直接在任何 HEEx 模板内编写挂钩。 LiveView 1.2 建立在 Phoenix.LiveView.Co locatedJS 的后台工作之上，允许您在 HEEx 中并置 CSS。 def table ( allocates ) do ~H""" < style :type = { MyApp.Co locatedCSS } > thead { color : ... ; } tbody , tr :hover { ... } < table > ... """ end 与 Co located JS 一样， :type 属性告诉 LiveView 在编译时将标签的内容提取到 _build 目录中的特殊 phoenix-co located 文件夹中。然后，您的打包程序（通常是 Tailwind 或 Esbuild）会拾取该文件，并将其作为正常 CSS 管道的一部分进行处理。但这是简单的部分。定义共置样式时，您通常想要的是确定它们的范围，这样它们就不会意外地应用于来自不同组件的页面上的其他元素。现代 CSS 有一个相对较新的 @scope 规则，它允许我们做到这一点，但有一些注意事项。 @scope 规则 @scope (scope root ) to (scope limit ) { /* … */ } @scope 规则接受根选择器和可选的限制选择器。如果我们能够对渲染的 HTML 进行注释，使其包含一个唯一的属性来标识模板的“根”及其结束位置，那么我们就可以拥有仅适用于该模板的规则。由于我们控制 HEEx 编译为 HTML 的方式，因此我们可以做到这一点。让我们看一个例子： attr :description , :string slot :item def my_list ( allocates ) do ~H""" < style :type = { MyApp.Co locatedCSS } > p { font - Weight : bold ; } < div > < p > { @description } < ul > < li :for = { item <- @item } > { render_slot ( @item ) } """ end 当我们在另一个模板中使用此组件时，例如在 LiveView 的 render/1 函数中， < p > Hello World < .my_list description = " My List " > < :item > < p > Item 1 < :item > Item 2 未修改的渲染 HTML看起来像这样： < p > Hello World < div > < p > My List < ul > < li > < p > Item 1 < li > Item 2 现在，为了正确识别属于 my_list 组件的 HTML 部分，我们需要注释所有模板的边界： < p phx-r > Hello World < div phx-r phx-css-foo > < p > 我的列表 < ul > < li > < p phx-r > Item 1 < li > Item 2 我们使用一个特殊的 phx-r 属性，该属性被添加到模板的所有最外层元素中，并且可以用作 @scope 规则中的限制选择器。请注意，我们在上面的示例中使用了一个槽。

Item 1

不属于 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.Co locatedCSS。 root_tag_attribute : "phx-r" 在实现并置 CSS 时，我们偶然发现了一个问题，需要我们重新审视 HEEx 模板的编译方式。如果您想了解更多相关内容，我们发布了单独的技术深入探讨。 tl;dr：为了使共置 CSS 工作，我们必须改变编译 HEEx 模板的方式，将编译拆分为单独的标记化和解析步骤，从而允许我们处理宏组件（共置 CSS 和 JS），而不会使其余的编译变得更加复杂。它还允许我们重用以前必须在模板编译和格式化之间复制的代码。默认情况下，我们不提供作用域 尽管为共置 CSS 付出了所有努力，但当您听说我们实际上并未在 LiveView 1.2 中提供作用域时，您可能会感到惊讶。原因是在撰写本文时（2026 年 6 月），@scope 规则尚未得到跨浏览器的良好支持。相反，我们提供了一个@behaviour，您可以实现它来进行自定义范围界定，这也允许您使用不同的策略。如果您决定成为早期采用者，我们在文档中确实有 @scope 实现。 1.2 中的小改进 除了并置 CSS 之外，LiveView 1.2 还包括一些小改进： 您现在可以实现 Phoenix.LiveView.HTMLForm