Purescript 卤素：定义自定义 HTML 元素

Question

我遇到了与这个未回答的问题类似的困难：Purescript: Halogen HTML DSL only Renders "id" tags

我正在尝试定义一个新的 HTML 元素。特别是，我想显示带有一些新标签的 svg elem 和 image 元素，例如 x_ 和 y_.

我是这样定义元素的：

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 []

然后是我想要的属性：

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 []

当我创建元素时，程序会编译，但是只呈现 <image></image> 标签，没有指定的属性。卤素与 virtual-dom 的接口方式似乎不允许我这样做，但是，我不确定为什么。

一般来说，为什么我不能向 div、svg 或 image 元素添加任何属性？我没有对这些元素中的任何一个使用 Halogen.HTML.Indexed。是这个问题吗？？类型检查器是否只是忽略了不允许这些组合的事实，因为我没有指定它们？？

总的来说，我什至愿意做一些事情：

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

然后调用

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

并呈现该属性。

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

编辑：阅读源代码，似乎namespace与它有关，但是，我不确定如何找到已构建元素的名称空间。

Answer 1

如果您尝试设置的属性不是标签的 javascript 属性，那么您需要使用 attr 而不是 prop 来定义它们。例如，"class" 属性被称为 className 作为属性，因为这是它的名称 in the Element interface.

Purescript 卤素：定义自定义 HTML 元素

Purescript Halogen: Defining Custom HTML Elements

purescript

halogen

virtual-dom