Web Components Community

Discussion on: Making a Toggle Switch with Web Components

Collapse
lorenzofox3 profile image
Laurent RENARD • Edited on

Very nice and thorough article !
Just one thing: I would advice to set role and tabindex only if the consumer of the component has not set them itself. With your implementation, there is no way to make the component skip the tab sequence:

  connectedCallback() {
    if(!this.hasAttribute('role')){
        this.setAttribute('role', 'switch')
    }
    if(!this.hasAttribute('tabindex')){
        this.setAttribute('tabindex', '0')
    }
    this.addEventListener('click', this.toggle)
  }
Enter fullscreen mode Exit fullscreen mode

So one can explicitly skip the element:

<toggle-switch tabindex="-1"></toggle-switch>
Enter fullscreen mode Exit fullscreen mode

Also in this case, that is not mandatory to clean the listeners on the disconnected lifecycle, although that is a good habit to take :D

Collapse
auroratide profile image
Timothy Foster Author

Thanks for the tip! Apparently this is something I did in my deployed version; it's been a few months since I wrote this article and my guess is I must have cut it due to the article's enormous length.

It's important though, so I'll be sure to add a note in!