Define your own elm-ui Element that works with Safari AR Quicklook feature on iOS 12+

USDZ_AR_QuickLook_with_elm-ui.elm

{- 
Define your own elm-ui Element that works with Safari AR Quicklook feature on iOS 12+
The problem with the standard Element nodes is that Safari wants the <a> node to only have
a single child and that needs to be an <img>
-}

usdz : List (Attribute Msg) -> { usdzUrl : String, imgUrl : String } -> Element Msg
usdz attrs rec =
  link 
    ( htmlAttribute (Html.Attributes.attribute "rel" "ar") 
    :: attrs
    )
    { label= html 
        (Html.node "img" 
          [ Html.Attributes.src   rec.imgUrl
          , Html.Attributes.style "max-width"  "100%"
          , Html.Attributes.style "max-height" "100%"
          ] 
          [] -- no other content allowed here by Apple
        )
    , url=rec.usdzUrl
    }


-- usage:
usdz [ width (px 240), centerX ] 
  { usdzUrl="models/model1.usdz"
  , imgUrl="img/model1_preview.png" 
  }

Also make sure, your web server serves .usdz files with the proper MIME type not included in most off-the-shelf Apache installs.
Look up the details on http://dev.apple.com