Можно ли добавить элементы пользовательского интерфейса Javascript в приложение на 100% вяз?

Мне не ясно, что вы подразумеваете под «компонентами пользовательского интерфейса Javascript», поскольку это может относиться ко многим различным вещам, таким как компоненты реакции или угловые компоненты. Но 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 через Html.node
2. Большинство браузеров (и более того, с помощью polyfill позволяет вам создать пользовательский элемент , который использует JS для визуализации самого себя.

Итак, ваш код Elm говорит, что я хочу для рендеринга <my-custom-thing customProp="whatever"/>. Elm отвечает за помещение этого узла в dom и удаление его.

Ваш пользовательский элемент и JS выполняют рендеринг того, что происходит внутри этого узла.

Ваш пользовательский элемент может отправлять события обратно в Elm (например, зависания, щелчки, пользовательские элементы).

Порты предназначены для обработки. У вас есть данные, которые вы хотите отправить между Elm / JS. Если вы отправляете данные через порт на JS, а JS изменяет DOM, у вас, скорее всего, возникнут проблемы.