switch web component checked state not displayed correctly

Question

I made a simple switch web component with a checked attribute. When I am clicking on the switch it will be set and displayed correctly. When I set the checked property from outside via the button it will be set and displayed correctly as well.

But when I combine these actions the attributes are fine, but it won't be visually changed anymore when setting ischecked with the button.

I uploaded a fiddle with the described problem: https://jsfiddle.net/axn46okv/

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <custom-toggle checked="true"></custom-toggle>
    <button onclick="test()">Change State</button>
    <script>
        function test() {
            var toggle = document.querySelector('custom-toggle');
            toggle.checked = !toggle.checked;
        }
    </script>
    <script type="module">
    const template = document.createElement('template');
template.innerHTML = `
<style>



/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
`

export class customToggle extends HTMLElement {
  #shadowRoot;
  #input;

  static get observedAttributes() {
    return ['checked', 'enabled'];
  }

  constructor() {
    super();

    this.#shadowRoot = this.attachShadow({
      mode: 'closed'
    });
    this.#shadowRoot.appendChild(template.content.cloneNode(true));
    this.#input = this.#shadowRoot.querySelector('input');
  }

  get checked() {
    return this.getAttribute('checked') === 'true';
  }
  set checked(value) {
    this.setAttribute('checked', Boolean(value));
    this.syncChecked();
  }

  connectedCallback() {
    this.syncChecked();
    this.#input.addEventListener("click", () => {
      this.checked = !this.checked;
    });
  }

  syncChecked() {
    if (this.checked && !this.#input.hasAttribute('checked')) {
      this.#input.setAttribute('checked', '');
      console.log("addAttribute");
    } else if (!this.checked && this.#input.hasAttribute('checked')) {
      this.#input.removeAttribute('checked');
      console.log("removeAttribute");
    }
  }
}

window.customElements.define('custom-toggle', customToggle);
</script>
</body>

</html>

The `checked` attribute should be different from the `checked` *property*. See [What is the difference between properties and attributes in HTML?](https://stackoverflow.com/q/6003819/215552) — Heretic Monkey, Jun 21 '23 at 16:24
I renamed the property to ischecked and the behavior unfortunatly still occurs — user10419906, Jun 21 '23 at 18:16
Everything can be driven by the ``checked`` **attribute** and a ``this.toggleAttribute()`` call — Danny '365CSI' Engelman, Jun 21 '23 at 18:35

score 0 · Answer 1 · answered Jun 21 '23 at 18:32

0

I figured it out.

The problem was the way I set the checked attribute:

this.#input.setAttribute('checked', '');

has to be:

this.#input.checked = true;

I am still confused why it works initially, but this solves it.

answered Jun 21 '23 at 18:32

user10419906

41
4

1

I think the pseudo selector :checked is referring to the checked property and the checked attribute does not reflect the change after checking. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#htmlattrdefvalue – user10419906 Jun 21 '23 at 19:17

Danny '365CSI' Engelman · Answer 2 · 2023-06-22T12:02:14.997

You are missing a attributeChangedCallback,

So your component never processes a checked attribute change by itself.

Simplified code:

<custom-toggle checked></custom-toggle>
<button onclick="document.querySelector('custom-toggle').toggle()">Change State</button>
<custom-toggle ></custom-toggle>
<script>
  customElements.define('custom-toggle', class extends HTMLElement {
    constructor() {
      super().attachShadow({mode:'open'})
             .innerHTML = `<style>
                            :host([checked]){background:lightgreen}
                            :host{display:inline-block;padding:1em}
                            :host,input{cursor:pointer}
                          </style>
                          <input type="checkbox">`;
      this.input = this.shadowRoot.querySelector("input");
    }
    connectedCallback(){
      this.onclick = evt => {
        if (evt.target == this.input) this.checked = this.input.checked;
        else this.toggle();
      }
    }
    static get observedAttributes() {
      return ['checked'];
    }
    get checked() {
      return this.hasAttribute('checked');
    }
    set checked(state) {
      this.toggleAttribute('checked', state);
    }
    toggle(state = !this.checked) {
      this.checked = state;        
    }
    attributeChangedCallback(name, oldValue, newValue) {
      this.input.checked = this.checked;
    }
  });
</script>

switch web component checked state not displayed correctly

2 Answers2