Cannot trigger Shoelace (CSS) select element on change

Question

I am using the select Shoelace-element for as agreement checkbox and need to check if it is checked or not. Chrome DevTools shows me the added class "switch--checked" to the label when the switch is checked. It is removed when unchecked.

I need to fire some events when the switch is checked and tried the jQuery hasClass function to do so. I have tried several classes next to the one below. None of it made my event trigger. Please help!

if ( $("label::part(base)").hasClass(".switch--checked") ) {
  // do something
}

Select element not-checked

Select element strong textchecked

Answer 1

If you get a reference to the element instance you will be able to read the checked property directly, as well as attach an event listener to get notified when the checked property changes:

const slSwitch= document.querySelector('sl-switch');

// Is it checked?
const checked = slSwitch.checked;

// Listen for changes
slSwitch.addEventListener('slChange', (e) => console.log("<sl-switch> is checked?:", e.target.checked));

You can read more about the properties and events that custom-element supports in their documentation: https://shoelace.style/components/switch