diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 83a0301de3..e6f0f6a859 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -173,7 +173,7 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.58.0-jammy
+      image: mcr.microsoft.com/playwright:v1.58.2-jammy
     env:
       ImageOS: ubuntu22
       HOME: /root
diff --git a/lib/phoenix_live_view/colocated_css.ex b/lib/phoenix_live_view/colocated_css.ex
index 13f2c3d978..7f9fea242b 100644
--- a/lib/phoenix_live_view/colocated_css.ex
+++ b/lib/phoenix_live_view/colocated_css.ex
@@ -1,126 +1,256 @@
 defmodule Phoenix.LiveView.ColocatedCSS do
   @moduledoc ~S'''
-  A special HEEx `:type` that extracts any CSS styles from a colocated `<style>` tag at compile time.
+  Building blocks for a special HEEx `:type` that extracts any CSS styles
+  from a colocated `<style>` tag at compile time.
+
+  To actually use `ColocatedCSS`, you must define a module including `use Phoenix.LiveView.ColocatedCSS`
+  and implement the `ColocatedCSS` behaviour.
 
   Note: To use `ColocatedCSS`, you need to run Phoenix 1.8+.
 
   Note: `ColocatedCSS` **must** be defined at the very beginning of the template in which it is used.
 
-  You can use `ColocatedCSS` to define any CSS styles directly in your components, for example:
+  Colocated CSS uses the same folder structures as Colocated JS. See `Phoenix.LiveView.ColocatedJS` for more information.
 
-  ```heex
-  <style :type={Phoenix.LiveView.ColocatedCSS}>
-    .sample-class {
-      background-color: #FFFFFF;
-    }
-  </style>
+  To bundle and use colocated CSS with esbuild, you can import it like this in your `app.js` file:
+
+  ```javascript
+  import "phoenix-colocated/my_app/colocated.css"
+  ```
+
+  Importing CSS in your `app.js` file will cause esbuild to generate a separate `app.css` file.
+  To load it, simply add a second `<link>` to your `root.html.heex` file, like so:
+
+  ```html
+  <link phx-track-static rel="stylesheet" href={~p"/assets/js/app.css"} />
+  ```
+
+  ## Global CSS
+
+  If all you need is global CSS, which is extracted as is, you can define your ColocatedCSS module like this:
+
+  ```elixir
+  defmodule MyAppWeb.ColocatedCSS do
+    use Phoenix.LiveView.ColocatedCSS
+
+    @impl true
+    def transform("style", _attrs, css, _meta) do
+      {:ok, css, []}
+    end
+  end
   ```
 
   ## Scoped CSS
 
-  By default, Colocated CSS styles are scoped at compile time to the template in which they are defined.
-  This provides style encapsulation preventing CSS rules within a component from unintentionally applying
-  to elements in other nested components. Scoping is performed via the use of the `@scope` CSS at-rule.
-  For more information, see [the docs on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope).
+  The idea behind scoped CSS is to restrict the elements that CSS rules apply to
+  to only the elements of the current template / component.
+
+  One way to scope CSS is to use [CSS `@scope` rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope).
+  A scoped `ColocatedCSS` module using CSS `@scope` can be implemented like this:
 
-  To prevent Colocated CSS styles from being scoped to the current template you can provide the `global`
-  attribute, for example:
+  ```elixir
+  defmodule MyAppWeb.ColocatedScopedCSS do
+    use Phoenix.LiveView.ColocatedCSS
+
+    @impl true
+    def transform("style", attrs, css, meta) do
+      validate_opts!(attrs)
+
+      {scope, css} = do_scope(css, attrs, meta)
+
+      {:ok, css, [root_tag_attribute: {"phx-css-#{scope}", true}]}
+    end
+
+    defp validate_opts!(opts) do
+      Enum.each(opts, fn {key, val} -> validate_opt!({key, val}, Map.delete(opts, key)) end)
+    end
+
+    defp validate_opt!({"lower-bound", val}, _other_opts) when val in ["inclusive", "exclusive"] do
+      :ok
+    end
+
+    defp validate_opt!({"lower-bound", val}, _other_opts) do
+      raise ArgumentError,
+            ~s|expected "inclusive" or "exclusive" for the `lower-bound` attribute of colocated css, got: #{inspect(val)}|
+    end
+
+    defp validate_opt!(_opt, _other_opts), do: :ok
+
+    defp do_scope(css, opts, meta) do
+      scope = hash("#{meta.module}_#{meta.line}: #{css}")
+
+      root_tag_attribute = root_tag_attribute()
+
+      upper_bound_selector = ~s|[phx-css-#{scope}]|
+      lower_bound_selector = ~s|[#{root_tag_attribute}]|
+
+      lower_bound_selector =
+        case opts do
+          %{"lower-bound" => "inclusive"} -> lower_bound_selector <> " > *"
+          _ -> lower_bound_selector
+        end
+
+      css = "@scope (#{upper_bound_selector}) to (#{lower_bound_selector}) { #{css} }"
+
+      {scope, css}
+    end
+
+    defp hash(string) do
+      # It is important that we do not pad
+      # the Base32 encoded value as we use it in
+      # an HTML attribute name and = (the padding character)
+      # is not valid.
+      string
+      |> then(&:crypto.hash(:md5, &1))
+      |> Base.encode32(case: :lower, padding: false)
+    end
+
+    defp root_tag_attribute() do
+      case Application.get_env(:phoenix_live_view, :root_tag_attribute) do
+        configured_attribute when is_binary(configured_attribute) ->
+          configured_attribute
+
+        configured_attribute ->
+          message = """
+          a global :root_tag_attribute must be configured to use scoped css
+
+          Expected global :root_tag_attribute to be a string, got: #{inspect(configured_attribute)}
+
+          The global :root_tag_attribute is usually configured to `"phx-r"`, but it needs to be explicitly enabled in your configuration:
+
+              config :phoenix_live_view, root_tag_attribute: "phx-r"
+
+          You can also use a different value than `"phx-r"`.
+          """
+
+          raise ArgumentError, message
+      end
+    end
+  end
+  ```
+
+  This module transforms a given style tag like
 
   ```heex
-  <style :type={Phoenix.LiveView.ColocatedCSS} global>
-    .sample-class {
-      background-color: #FFFFFF;
-    }
+  <%!-- Note that :type accepts aliases as well! --%>
+  <style :type={MyAppWeb.ColocatedScopedCSS}>
+    .my-class { color: red; }
   </style>
   ```
 
-  **Note:** When using Scoped Colocated CSS with implicit `inner_block` slots or named slots, the content
-  provided will be scoped to the parent template which is providing the content, not the component which
-  defines the slot. For example, in the following snippet the elements within [`intersperse/1`](`Phoenix.Component.intersperse/1`)'s
-  `inner_block` and `separator` slots will both be styled by the `.sample-class` rule, not any rules defined within the
-  [`intersperse/1`](`Phoenix.Component.intersperse/1`) component itself:
+  into
+
+  ```css
+  @scope ([phx-css-abc123]) to ([phx-r]) {
+    .my-class { color: red; }
+  }
+  ```
+
+  and if `lower-bound` is set to `inclusive`, it transforms it into
+
+  ```css
+  @scope ([phx-css-abc123]) to ([phx-r] > *) {
+    .my-class { color: red; }
+  }
+  ```
+
+  This applies any styles defined in the colocated CSS block to any element between a local root and a component.
+  It relies on LiveView's global `:root_tag_attribute`, which is an attribute that LiveView adds to all root tags,
+  no matter if colocated CSS is used or not. When the browser encounters a `phx-r` attribute, which in this case
+  is assumed to be the configured global `:root_tag_attribute`, it stops the scoped CSS rule.
+
+  Another way to implement scoped CSS could be to use PostCSS and apply an attribute to all tags in a template.
+  '''
+
+  @doc """
+  Callback invoked for each colocated CSS tag.
+
+  The callback receives the tag name, the string attributes and a map of metadata.
+
+  For example, for the following tag:
 
   ```heex
-  <style :type={Phoenix.LiveView.ColocatedCSS}>
-    .sample-class {
-      background-color: #FFFFFF;
-    }
+  <style :type={MyAppWeb.ColocatedCSS} data-scope="my-scope" foo={@bar}>
+    .my-class { color: red; }
   </style>
-  <div class="sample-class">
-    <.intersperse :let={item} enum={[1, 2, 3]}>
-      <:separator>
-        <span class="sample-class">|</span>
-      </:separator>
-      <div class="sample-class">
-        <p>Item {item}</p>
-      </div>
-    </.intersperse>
-  </div>
   ```
 
-  > #### Warning! {: .warning}
-  >
-  > The `@scope` CSS at-rule is Baseline available as of the end of 2025. To ensure that Scoped CSS will
-  > work on the browsers you need, be sure to check [Can I Use?](https://caniuse.com/css-cascade-scope) for
-  > browser compatibility.
+  The callback would receive the following arguments:
 
-  > #### Tip {: .info}
-  >
-  > When Colocated CSS is scoped via the `@scope` rule, all "local root" elements in the given template serve as scoping roots.
-  > "Local root" elements are the outermost elements of the template itself and the outermost elements of any content passed to
-  > child components' slots. For selectors in your Colocated CSS to target the scoping root, you will need to
-  > specify the scoping root in the selector via the use of the `:scope` pseudo-selector. For more details,
-  > see [the docs on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope#scope_pseudo-class_within_scope_blocks).
+    * tag_name: `"style"`
+    * attrs: %{"data-scope" => "my-scope"}
+    * meta: `%{file: "path/to/file.ex", module: MyApp.MyModule, line: 10}`
 
-  Colocated CSS uses the same folder structures as Colocated JS. See `Phoenix.LiveView.ColocatedJS` for more information.
+  The callback must return either `{:ok, scoped_css, directives}` or `{:error, reason}`.
+  If an error is returned, it will be logged and the CSS will not be extracted.
 
-  To bundle and use colocated CSS with esbuild, you can import it like this in your `app.js` file:
+  The `directives` needs to be a keyword list that supports the following options:
 
-  ```javascript
-  import "phoenix-colocated/my_app/colocated.css"
-  ```
+    * `root_tag_attribute`: A `{key, value}` tuple that will be added a
+       an attribute to all "root tags" of the template defining the scoped CSS tag.
+       See the section on root tags below for more information.
+    * `tag_attribute`: A `{key, value}` tuple that will be added as an attribute to
+       all HTML tags in the template defining the scoped CSS tag.
 
-  Importing CSS in your `app.js` file will cause esbuild to generate a separate `app.css` file.
-  To load it, simply add a second `<link>` to your `root.html.heex` file, like so:
+  ## Root tags
 
-  ```html
-  <link phx-track-static rel="stylesheet" href={~p"/assets/js/app.css"} />
-  ```
+  In a HEEx template, all outermost tags are considered "root tags" and are
+  affected by the `root_tag_attribute` directive. If a template uses components,
+  the slots of those components are considered as root tags as well.
 
-  ## Options
+  Here's an example showing which elements would be considered root tags:
 
-  Colocated CSS can be configured through the attributes of the `<style>` tag.
-  The supported attributes are:
+  ```heex
+  <div>                              <---- root tag
+    <span>Hello</span>               <---- not a root tag
 
-    * `global` - If provided, the Colocated CSS rules contained within the `<style>` tag
-      will not be scoped to the template within which it is defined, and will instead act
-      as global CSS rules.
+    <.my_component>
+      <p>World</p>                   <---- root tag
+    </.my_component>
+  </div>
 
-    * `lower-bound` - Configure whether or not the the lower-bound of Scoped Colocated CSS is inclusive, that is,
-      root elements of child components can be styled by the parent component's Colocated CSS. This can be
-      useful for applying styles to the child component's root elements for layout purposes. Valid values are
-      `"inclusive"` and `"exclusive"`. Scoped Colocated CSS defaults to `"exclusive"`, so that styles are entirely
-      scoped to the parent unless otherwise specified.
-  '''
+  <.my_component>
+    <span>World</span>               <---- root tag
+
+    <:a_named_slot>
+      <div>                          <---- root tag
+        Foo
+        <p>Bar</p>                   <---- not a root tag
+      </div>
+    </:a_named_slot>
+  </.my_component>
+  ```
+  """
+  @callback transform(tag_name :: binary(), attrs :: map(), css :: binary(), meta :: keyword()) ::
+              {:ok, binary(), keyword()} | {:error, term()}
+
+  defmacro __using__(_) do
+    # implements the MacroComponent behaviour
+    # but we don't add @behaviour to prevent users to need to differentiate
+    # @impl true for the ColocatedCSS behaviour itself
+    quote do
+      @behaviour unquote(__MODULE__)
+
+      def transform(ast, meta) do
+        Phoenix.LiveView.ColocatedCSS.__transform__(ast, meta, __MODULE__)
+      end
+    end
+  end
 
-  @behaviour Phoenix.Component.MacroComponent
   @behaviour Phoenix.LiveView.ColocatedAssets
 
-  @impl true
-  def transform({"style", attributes, [text_content], _tag_meta} = _ast, meta) do
+  @doc false
+  def __transform__({"style", attributes, [text_content], _tag_meta} = _ast, meta, module) do
     validate_phx_version!()
 
     opts = Map.new(attributes)
-
-    validate_opts!(opts)
-
-    {scope, data} = extract(opts, text_content, meta)
+    {data, directives} = extract(opts, text_content, meta, module)
 
     # we always drop colocated CSS from the rendered output
-    {:ok, "", data, [root_tag_attribute: {"phx-css-#{scope}", true}]}
+    {:ok, "", data, directives}
   end
 
-  def transform(_ast, _meta) do
+  def __transform__(_ast, _meta) do
     raise ArgumentError, "ColocatedCSS can only be used on style tags"
   end
 
@@ -132,58 +262,25 @@ defmodule Phoenix.LiveView.ColocatedCSS do
     end
   end
 
-  defp validate_opts!(opts) do
-    Enum.each(opts, fn {key, val} -> validate_opt!({key, val}, Map.delete(opts, key)) end)
-  end
-
-  defp validate_opt!({"global", val}, other_opts) when val in [nil, true] do
-    case other_opts do
-      %{"lower-bound" => _} ->
-        raise ArgumentError,
-              "colocated css must be scoped to use the `lower-bound` attribute, but `global` attribute was provided"
-
-      _ ->
-        :ok
-    end
-  end
-
-  defp validate_opt!({"global", val}, _other_opts) do
-    raise ArgumentError,
-          "expected nil or true for the `global` attribute of colocated css, got: #{inspect(val)}"
-  end
-
-  defp validate_opt!({"lower-bound", val}, _other_opts) when val in ["inclusive", "exclusive"] do
-    :ok
-  end
-
-  defp validate_opt!({"lower-bound", val}, _other_opts) do
-    raise ArgumentError,
-          ~s|expected "inclusive" or "exclusive" for the `lower-bound` attribute of colocated css, got: #{inspect(val)}|
-  end
-
-  defp validate_opt!(_opt, _other_opts), do: :ok
-
-  @doc false
-  def extract(opts, text_content, meta) do
-    scope = scope(text_content, meta)
-    root_tag_attribute = root_tag_attribute()
-
-    upper_bound_selector = ~s|[phx-css-#{scope}]|
-    lower_bound_selector = ~s|[#{root_tag_attribute}]|
+  defp extract(opts, text_content, meta, module) do
+    transform_meta = %{
+      module: meta.env.module,
+      file: meta.env.file,
+      line: meta.env.line
+    }
 
-    lower_bound_selector =
-      case opts do
-        %{"lower-bound" => "inclusive"} -> lower_bound_selector <> " > *"
-        _ -> lower_bound_selector
-      end
+    {styles, directives} =
+      case module.transform("style", opts, text_content, transform_meta) do
+        {:ok, scoped_css, directives} when is_binary(scoped_css) and is_list(directives) ->
+          {scoped_css, directives}
 
-    styles =
-      case opts do
-        %{"global" => _} ->
-          text_content
+        {:error, reason} ->
+          raise ArgumentError,
+                "#{inspect(module)} returned an error: #{inspect(reason)}"
 
-        _ ->
-          "@scope (#{upper_bound_selector}) to (#{lower_bound_selector}) { #{text_content} }"
+        other ->
+          raise ArgumentError,
+                "expected the ColocatedCSS implementation to return {:ok, scoped_css, directives} or {:error, term}, got: #{inspect(other)}"
       end
 
     filename = "#{meta.env.line}_#{hash(styles)}.css"
@@ -191,45 +288,15 @@ defmodule Phoenix.LiveView.ColocatedCSS do
     data =
       Phoenix.LiveView.ColocatedAssets.extract(__MODULE__, meta.env.module, filename, styles, nil)
 
-    {scope, data}
-  end
-
-  defp scope(text_content, meta) do
-    hash("#{meta.env.module}_#{meta.env.line}: #{text_content}")
+    {data, directives}
   end
 
   defp hash(string) do
-    # It is important that we do not pad
-    # the Base32 encoded value as we use it in
-    # an HTML attribute name and = (the padding character)
-    # is not valid.
     string
     |> then(&:crypto.hash(:md5, &1))
     |> Base.encode32(case: :lower, padding: false)
   end
 
-  defp root_tag_attribute() do
-    case Application.get_env(:phoenix_live_view, :root_tag_attribute) do
-      configured_attribute when is_binary(configured_attribute) ->
-        configured_attribute
-
-      configured_attribute ->
-        message = """
-        a global :root_tag_attribute must be configured to use colocated css
-
-        Expected global :root_tag_attribute to be a string, got: #{inspect(configured_attribute)}
-
-        The global :root_tag_attribute is usually configured to `"phx-r"`, but it needs to be explicitly enabled in your configuration:
-
-            config :phoenix_live_view, root_tag_attribute: "phx-r"
-
-        You can also use a different value than `"phx-r"`.
-        """
-
-        raise ArgumentError, message
-    end
-  end
-
   @impl Phoenix.LiveView.ColocatedAssets
   def build_manifests(files) do
     if files == [] do
diff --git a/lib/phoenix_live_view/tag_engine/compiler.ex b/lib/phoenix_live_view/tag_engine/compiler.ex
index 9047cb839b..0366402810 100644
--- a/lib/phoenix_live_view/tag_engine/compiler.ex
+++ b/lib/phoenix_live_view/tag_engine/compiler.ex
@@ -27,6 +27,7 @@ defmodule Phoenix.LiveView.TagEngine.Compiler do
       caller: Keyword.fetch!(opts, :caller),
       source: Keyword.fetch!(opts, :source),
       tag_handler: tag_handler,
+      tag_attributes: Keyword.get_values(directives, :tag_attribute),
       root_tag_attribute: Application.get_env(:phoenix_live_view, :root_tag_attribute),
       root_tag_attributes: Keyword.get_values(directives, :root_tag_attribute),
       # The following keys are updated when traversing nodes
@@ -491,6 +492,7 @@ defmodule Phoenix.LiveView.TagEngine.Compiler do
     text =
       "<#{name}"
       |> maybe_add_phx_loc(state, meta)
+      |> maybe_add_tag_attributes(state, meta)
       |> maybe_add_root_tag_attributes(state, meta)
 
     substate = state.engine.handle_text(substate, meta, text)
@@ -506,6 +508,22 @@ defmodule Phoenix.LiveView.TagEngine.Compiler do
     end
   end
 
+  defp maybe_add_tag_attributes(text, state, _meta) do
+    case state do
+      %{tag_attributes: [_ | _] = attributes} ->
+        attrs =
+          attributes
+          |> Phoenix.HTML.attributes_escape()
+          |> Phoenix.HTML.safe_to_string()
+
+        # Phoenix.HTML.attributes_escape/1 adds a leading space automatically
+        "#{text}#{attrs}"
+
+      _ ->
+        text
+    end
+  end
+
   defp maybe_add_root_tag_attributes(text, %{local_root?: true} = state, _meta) do
     case state do
       %{root_tag_attribute: root_tag_attribute} when is_binary(root_tag_attribute) ->
diff --git a/lib/phoenix_live_view/tag_engine/parser.ex b/lib/phoenix_live_view/tag_engine/parser.ex
index 3c1b85d24d..1d68ede69e 100644
--- a/lib/phoenix_live_view/tag_engine/parser.ex
+++ b/lib/phoenix_live_view/tag_engine/parser.ex
@@ -684,14 +684,17 @@ defmodule Phoenix.LiveView.TagEngine.Parser do
     directives
   end
 
-  defp validate_directive!(_module, :root_tag_attribute, nil, _), do: :ok
+  defp validate_directive!(_module, type, nil, _)
+       when type in [:tag_attribute, :root_tag_attribute], do: :ok
 
-  defp validate_directive!(_module, :root_tag_attribute, {name, value}, _meta)
-       when is_binary(name) and (is_binary(value) or value == true) do
+  defp validate_directive!(_module, type, {name, value}, _meta)
+       when type in [:tag_attribute, :root_tag_attribute] and
+              is_binary(name) and (is_binary(value) or value == true) do
     :ok
   end
 
-  defp validate_directive!(module, :root_tag_attribute, other, meta) do
+  defp validate_directive!(module, type, other, meta)
+       when type in [:tag_attribute, :root_tag_attribute] do
     throw_syntax_error!(
       """
       expected {name, value} for :root_tag_attribute directive from macro component #{inspect(module)}, got: #{inspect(other)}
diff --git a/package-lock.json b/package-lock.json
index ae56c89a34..fad4cc9299 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@babel/preset-env": "7.27.2",
         "@babel/preset-typescript": "^7.27.1",
         "@eslint/js": "^9.29.0",
-        "@playwright/test": "^1.58.0",
+        "@playwright/test": "^1.58.2",
         "@types/jest": "^30.0.0",
         "@types/phoenix": "^1.6.6",
         "css.escape": "^1.5.1",
@@ -2966,13 +2966,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.58.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.0.tgz",
-      "integrity": "sha512-fWza+Lpbj6SkQKCrU6si4iu+fD2dD3gxNHFhUPxsfXBPhnv3rRSQVd0NtBUT9Z/RhF/boCBcuUaMUSTRTopjZg==",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.58.0"
+        "playwright": "1.58.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7156,13 +7156,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.58.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.0.tgz",
-      "integrity": "sha512-2SVA0sbPktiIY/MCOPX8e86ehA/e+tDNq+e5Y8qjKYti2Z/JG7xnronT/TXTIkKbYGWlCbuucZ6dziEgkoEjQQ==",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.58.0"
+        "playwright-core": "1.58.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -7175,9 +7175,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.58.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.0.tgz",
-      "integrity": "sha512-aaoB1RWrdNi3//rOeKuMiS65UCcgOVljU46At6eFcOFPFHWtd2weHRRow6z/n+Lec0Lvu0k9ZPKJSjPugikirw==",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/package.json b/package.json
index e00bd5de67..30b99a2813 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "@babel/preset-env": "7.27.2",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.29.0",
-    "@playwright/test": "^1.58.0",
+    "@playwright/test": "^1.58.2",
     "@types/jest": "^30.0.0",
     "@types/phoenix": "^1.6.6",
     "css.escape": "^1.5.1",
diff --git a/test/e2e/support/colocated_live.ex b/test/e2e/support/colocated_live.ex
index 9136b5ed7b..259e5de7ca 100644
--- a/test/e2e/support/colocated_live.ex
+++ b/test/e2e/support/colocated_live.ex
@@ -35,6 +35,8 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
   end
 
   alias Phoenix.LiveView.ColocatedHook, as: Hook
+  alias Phoenix.LiveViewTest.Support.ColocatedScopedCSS, as: ScopedCSS
+  alias Phoenix.LiveViewTest.Support.ColocatedGlobalCSS, as: GlobalCSS
   alias Phoenix.LiveView.JS
 
   def mount(_params, _session, socket) do
@@ -195,7 +197,7 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
 
   defp global_colocated_css(assigns) do
     ~H"""
-    <style :type={Phoenix.LiveView.ColocatedCSS} global>
+    <style :type={GlobalCSS}>
       .test-global-css { background-color: rgb(255, 0, 0); }
     </style>
     """
@@ -203,7 +205,7 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
 
   defp scoped_colocated_css(assigns) do
     ~H"""
-    <style :type={Phoenix.LiveView.ColocatedCSS}>
+    <style :type={ScopedCSS}>
       .test-scoped-css { background-color: rgb(0, 0, 255); }
     </style>
     <div>
@@ -268,7 +270,7 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
 
   defp scoped_css_inner_block_two(assigns) do
     ~H"""
-    <style :type={Phoenix.LiveView.ColocatedCSS}>
+    <style :type={ScopedCSS}>
       .test-scoped-css { background-color: rgb(255, 255, 0); }
     </style>
     <div>
@@ -290,7 +292,7 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
 
   defp scoped_css_slot_two(assigns) do
     ~H"""
-    <style :type={Phoenix.LiveView.ColocatedCSS}>
+    <style :type={ScopedCSS}>
       .test-scoped-css { background-color: rgb(0, 255, 0); }
     </style>
     <div>
@@ -302,7 +304,7 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
 
   defp scoped_exclusive_lower_bound_colocated_css(assigns) do
     ~H"""
-    <style :type={Phoenix.LiveView.ColocatedCSS}>
+    <style :type={ScopedCSS}>
       .container:where(:scope) {
         display: flex;
 
@@ -319,7 +321,7 @@ defmodule Phoenix.LiveViewTest.E2E.ColocatedLive do
 
   defp scoped_inclusive_lower_bound_colocated_css(assigns) do
     ~H"""
-    <style :type={Phoenix.LiveView.ColocatedCSS} lower-bound="inclusive">
+    <style :type={ScopedCSS} lower-bound="inclusive">
       .container:where(:scope) {
         display: flex;
 
diff --git a/test/e2e/tests/colocated.spec.js b/test/e2e/tests/colocated.spec.js
index 2adfdd2daf..f619e914b9 100644
--- a/test/e2e/tests/colocated.spec.js
+++ b/test/e2e/tests/colocated.spec.js
@@ -52,7 +52,13 @@ test("global colocated css works", async ({ page }) => {
   );
 });
 
-test("scoped colocated css works", async ({ page }) => {
+test("scoped colocated css works", async ({ page, browserName }) => {
+  // TODO: revisit when
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1980526
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1914188
+  // are fixed.
+  test.skip(browserName === "firefox", "Currently broken");
+
   await page.goto("/colocated");
   await syncLV(page);
 
diff --git a/test/phoenix_live_view/colocated_css_test.exs b/test/phoenix_live_view/colocated_css_test.exs
index 6f1e00006d..79d7373e61 100644
--- a/test/phoenix_live_view/colocated_css_test.exs
+++ b/test/phoenix_live_view/colocated_css_test.exs
@@ -18,7 +18,7 @@ defmodule Phoenix.LiveView.ColocatedCSSTest do
 
         def fun(assigns) do
           ~H"""
-          <style :type={Phoenix.LiveView.ColocatedCSS} global>
+          <style :type={Phoenix.LiveViewTest.Support.ColocatedGlobalCSS}>
             .sample-class { background-color: #FFFFFF; }
           </style>
           """
@@ -68,53 +68,6 @@ defmodule Phoenix.LiveView.ColocatedCSSTest do
       :code.delete(__MODULE__.TestGlobalComponent)
       :code.purge(__MODULE__.TestGlobalComponent)
     end
-
-    test "raises for invalid global attribute value" do
-      message = ~r/expected nil or true for the `global` attribute of colocated css, got: "bad"/
-
-      assert_raise ParseError,
-                   message,
-                   fn ->
-                     defmodule TestBadGlobalAttrComponent do
-                       use Phoenix.Component
-
-                       def fun(assigns) do
-                         ~H"""
-                         <style :type={Phoenix.LiveView.ColocatedCSS} global="bad">
-                           .sample-class { background-color: #FFFFFF; }
-                         </style>
-                         """
-                       end
-                     end
-                   end
-    after
-      :code.delete(__MODULE__.TestBadGlobalAttrComponent)
-      :code.purge(__MODULE__.TestBadGlobalAttrComponent)
-    end
-
-    test "raises if scoped css specific options are provided" do
-      message =
-        ~r/colocated css must be scoped to use the `lower-bound` attribute, but `global` attribute was provided/
-
-      assert_raise ParseError,
-                   message,
-                   fn ->
-                     defmodule TestScopedAttrWhileGlobalComponent do
-                       use Phoenix.Component
-
-                       def fun(assigns) do
-                         ~H"""
-                         <style :type={Phoenix.LiveView.ColocatedCSS} global lower-bound="inclusive">
-                           .sample-class { background-color: #FFFFFF; }
-                         </style>
-                         """
-                       end
-                     end
-                   end
-    after
-      :code.delete(__MODULE__.TestScopedAttrWhileGlobalComponent)
-      :code.purge(__MODULE__.TestScopedAttrWhileGlobalComponent)
-    end
   end
 
   describe "scoped styles" do
@@ -124,7 +77,7 @@ defmodule Phoenix.LiveView.ColocatedCSSTest do
 
         def fun(assigns) do
           ~H"""
-          <style :type={Phoenix.LiveView.ColocatedCSS}>
+          <style :type={Phoenix.LiveViewTest.Support.ColocatedScopedCSS}>
             .sample-class { background-color: #FFFFFF; }
           </style>
           """
@@ -189,7 +142,7 @@ defmodule Phoenix.LiveView.ColocatedCSSTest do
 
         def fun(assigns) do
           ~H"""
-          <style :type={Phoenix.LiveView.ColocatedCSS} lower-bound="inclusive">
+          <style :type={Phoenix.LiveViewTest.Support.ColocatedScopedCSS} lower-bound="inclusive">
             .sample-class { background-color: #FFFFFF; }
           </style>
           """
@@ -260,7 +213,7 @@ defmodule Phoenix.LiveView.ColocatedCSSTest do
 
                        def fun(assigns) do
                          ~H"""
-                         <style :type={Phoenix.LiveView.ColocatedCSS} lower-bound="unknown">
+                         <style :type={Phoenix.LiveViewTest.Support.ColocatedScopedCSS} lower-bound="unknown">
                            .sample-class { background-color: #FFFFFF; }
                          </style>
                          """
diff --git a/test/support/colocated_css.ex b/test/support/colocated_css.ex
new file mode 100644
index 0000000000..686b320c88
--- /dev/null
+++ b/test/support/colocated_css.ex
@@ -0,0 +1,87 @@
+defmodule Phoenix.LiveViewTest.Support.ColocatedScopedCSS do
+  use Phoenix.LiveView.ColocatedCSS
+
+  @impl true
+  def transform("style", attrs, css, meta) do
+    validate_opts!(attrs)
+
+    {scope, css} = do_scope(css, attrs, meta)
+
+    {:ok, css, [root_tag_attribute: {"phx-css-#{scope}", true}]}
+  end
+
+  defp validate_opts!(opts) do
+    Enum.each(opts, fn {key, val} -> validate_opt!({key, val}, Map.delete(opts, key)) end)
+  end
+
+  defp validate_opt!({"lower-bound", val}, _other_opts) when val in ["inclusive", "exclusive"] do
+    :ok
+  end
+
+  defp validate_opt!({"lower-bound", val}, _other_opts) do
+    raise ArgumentError,
+          ~s|expected "inclusive" or "exclusive" for the `lower-bound` attribute of colocated css, got: #{inspect(val)}|
+  end
+
+  defp validate_opt!(_opt, _other_opts), do: :ok
+
+  defp do_scope(css, opts, meta) do
+    scope = hash("#{meta.module}_#{meta.line}: #{css}")
+
+    root_tag_attribute = root_tag_attribute()
+
+    upper_bound_selector = ~s|[phx-css-#{scope}]|
+    lower_bound_selector = ~s|[#{root_tag_attribute}]|
+
+    lower_bound_selector =
+      case opts do
+        %{"lower-bound" => "inclusive"} -> lower_bound_selector <> " > *"
+        _ -> lower_bound_selector
+      end
+
+    css = "@scope (#{upper_bound_selector}) to (#{lower_bound_selector}) { #{css} }"
+
+    {scope, css}
+  end
+
+  defp hash(string) do
+    # It is important that we do not pad
+    # the Base32 encoded value as we use it in
+    # an HTML attribute name and = (the padding character)
+    # is not valid.
+    string
+    |> then(&:crypto.hash(:md5, &1))
+    |> Base.encode32(case: :lower, padding: false)
+  end
+
+  defp root_tag_attribute() do
+    case Application.get_env(:phoenix_live_view, :root_tag_attribute) do
+      configured_attribute when is_binary(configured_attribute) ->
+        configured_attribute
+
+      configured_attribute ->
+        message = """
+        a global :root_tag_attribute must be configured to use scoped css
+
+        Expected global :root_tag_attribute to be a string, got: #{inspect(configured_attribute)}
+
+        The global :root_tag_attribute is usually configured to `"phx-r"`, but it needs to be explicitly enabled in your configuration:
+
+            config :phoenix_live_view, root_tag_attribute: "phx-r"
+
+        You can also use a different value than `"phx-r"`.
+        """
+
+        raise ArgumentError, message
+    end
+  end
+end
+
+defmodule Phoenix.LiveViewTest.Support.ColocatedGlobalCSS do
+  use Phoenix.LiveView.ColocatedCSS
+
+  @impl true
+  def transform("style", _attrs, css, _meta) do
+    {:ok, css, []}
+  end
+end