是否可以向100%elm应用程序添加javascript ui元素?

我不清楚您所说的“javascript ui组件”是什么意思,因为它可以指许多不同的东西,比如react组件或angular组件。但elm确实支持标准 Web Components 通过 Custom Elements 。

下面是一个不完整的例子,它看起来像榆树的一面,从 Beginning Elm :

googleMap : List (Attribute a) -> List (Html a) -> Html a
googleMap =
    Html.node "google-map"


onGoogleMapDrag : Attribute Msg
onGoogleMapDrag =
    coordinatesDecoder
        |> Json.Decode.map UpdateCenter
        |> on "google-map-drag"


view : Model -> Html Msg
view model =
    googleMap
        [ attribute "latitude" (toString model.center.latitude)
        , attribute "longitude" (toString model.center.longitude)
        , attribute "drag-events" "true"
        , attribute "zoom" "5"
        , onGoogleMapDrag
        ]
        (List.map viewMarker model.markers)

这就是你需要知道的:

1. elm让我们通过 Html.node
2. 大多数浏览器(以及更多 a polyfill 允许你创建一个 custom element 使用js渲染自身的。

所以,你的elm代码说我想 <my-custom-thing customProp="whatever"/> . elm负责将该节点放入dom中,并将其移除。

您的自定义元素和js负责呈现该节点中发生的内容。

您的自定义元素可以将事件发送回ELM(例如,HOFER、点击、自定义内容)。

端口更适合处理。您有要在elm/js之间发送的数据。如果您通过端口向js发送数据,js改变了dom,您可能会遇到问题。