The onconnect event handler is not triggered when defined through element

[icyc9]

It appears that the onconnect event handler is not triggered when defined through an element.

<script nomodule src=https://unpkg.com/snuggsi></script>
  <input-output onconnect=connectComponent>
    <input id=input-output placeholder="Hello">
    <output for=input-output>{value}</output>
  </input-output>

<script nomodule async defer>
    Element `input-output`
    (class extends HTMLElement {
      static oninput ()
      {
        this.render() 
      }

      static connectComponent () {
        alert("Connecting ....")
      }

      get value () 
      {
        return this.select ('input').value || 'enter something' 
      }
    })
</script>

[mrbernnz]

@snuggs Correct me if I'm wrong, but you can set a event handler method inside the custom element class? /cc @RobertChristopher

[snuggs]

Correct @mrbernnz also onconnect is a snuggsi ツ convention therefore is not recognized as a W3C/WHATWG on event handler. So the component will not recognize onconnect. This pattern was solidified after a recent discussion with @domenic on a proper pattern for on* event conventions.

https://github.com/tmpvar/jsdom/pull/1063#issuecomment-302894790

So the convention would be:

<input-output>
   <input id=input-output placeholder="Hello">
   <output for=input-output>{value}</output>
</input-output>

<script nomodule defer async>

Element `input-output`

(class extends HTMLElement {

  static oninput ()
    { this.render () }

  static onconnect ()
    {  alert(`Connecting ....`) }

  get value () {
    return this.select ('input').value
      || 'enter something'
  }
})

</script>

/cc @RobertChristopher @brandondees @VicenteRD @btakita

https://github.com/devpunks/snuggsi/blob/3592c0a4dc878562b5a9667fc2821c33409817b0/elements/global-event-handlers.es#L45-L46

[snuggs]

@RobertChristopher closing this. Please read above comment.

Also Please see MDN GlobalEventHandlers for a list of all valid W3C / WHATWG DOM on* events that can be (conventionally implicit) bound. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers

/cc @scottmacdowell @robcole @brandondees @mrbernnz @btakita