autofocus in Elm that actually works

custom-element.js

customElements.define('focus-callback', class extends HTMLElement {
  constructor(){
    super()
    this._callBackId = null;
  }

  set callBackId(value){
    this._callBackId = value;
  }
  connectedCallback() {
      try {
          document.getElementById(this._callBackId).focus();
      } catch (error) {
        // skip
      } finally {
        this.dispatchEvent(new CustomEvent('attempted'));
      }
  }
});

Example.elm

input [
    focus (item.id) (RequiresFocus_ Nothing)
  else
    none
]

UiExtra.elm

focus elementId msg =
    Element.el [ Element.transparent True ]
        (Html.node "focus-callback"
            [ Html.Attributes.property "callBackId" (Encode.string elementId)
            , Html.Events.on "attempted" (Decode.succeed msg)
            ]
            []
            |> Element.html
        )
        |> Element.onRight

none =
    Html.Attributes.style "" "" |> Element.htmlAttribute