Global Prefixes for Built-in Components

When you use Phoenix.Component, you can allow custom global attribute prefixes using the global_prefixes option. The example provided in the docs is exactly my use-case:

use Phoenix.Component, global_prefixes: ~w(x-)

This allows x- attributes, such as those used by Alpine.js, to be passed in to my components without a compiler warning.

Question: Is it possible to allow additional custom attributes for components defined in Phoenix.Component, such as form/1?

I have a reason to place an Alpine.js attribute on the <form> generated by calling <.form>, however this emits a compiler warning:

warning: undefined attribute "x-..." for component Phoenix.Component.form/1

As I see it, my options are:

  1. Reimplement the form/1 component with the additional prefixes defined, and maintain that reimplementation long-term.
  2. Lose the benefits of form/1 and create <form> elements directly at the callsite.

Is there a better way?

3 Likes

I did something like this:

<.form for={changeset} {%{"@change"=> "changed = true"}}>

Still a workaround but works well for me :+1:

1 Like