Skip to content
Search Create account

Web Components Community

Web Components Community is a community of amazing users

The Community Platform for Web Components Users and Developers

Create account Log in
Twitter Github

Discussion on: Making a Toggle Switch with Web Components

View post
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!