Purescript Halogen: Defining Custom HTML Elements

Question

I'm having difficulties similar to this unanswered question: Purescript: Halogen HTML DSL only Renders "id" tags

I'm trying to define a new HTML element. In particular, I would like to display an svg elem and image element with some new tags, like x_ , and y_ .

I'm defining the element like so:

image :: forall p i. Array (Prop i) -> Array (HTML p i) -> HTML p i
image xs = element (tagName "image") xs

image_ :: forall p i. Array (HTML p i) -> HTML p i
image_ = image []

And then attributes I would like:

image :: forall p i. Array (Prop i) -> Array (HTML p i) -> HTML p i
image xs = element (tagName "image") xs

image_ :: forall p i. Array (HTML p i) -> HTML p i
image_ = image []

When I create the element, the program compiles, however only the <image></image> tags are rendered, without the specified attributes. It seems like the way halogen interfaces with virtual-dom does not allow me to do this, however, I'm not sure why.

In general, why can't I just add any attributes to a div , svg , or image element? I'm not using Halogen.HTML.Indexed for any of these elements. Is that the problem?? Is the type checker just missing the fact that these combinations are not allowed because I haven't specified them??

In general, I would like to do something even like:

customProperty :: forall i. String -> String -> Prop i
customProperty p = prop (propName p) (Just $ attrName p)

and then call

image [ customProperty "myProperty" "myPropertyValue" ] []

and have that attribute rendered.

========================

Edit: Reading through the source code, it seems that namespace has something to do with it, however, I'm not sure how to find the namespace of an already constructed element.

Answer 1

If the attributes you're trying to set are not javascript properties of the tag then you need to use attr rather than prop to define them. For example, the "class" attribute is called className as a property, as this is the name of it in the Element interface .