wc-toggle.html

<template id="wc-toggle-template">
    <style>
        :host {
            display: inline-flex;
            padding: var(--wc-toggle-padding, 1rem);
        }

        :host([readonly]) {
            pointer-events: none;
        }

        .input-checkbox {
            position: absolute;
            left: -9999px;
        }

        .label-left,
        .label-right {
            cursor: pointer;
            transition: text-shadow var(--wc-toggle-transition-time, 0.2s);
        }

        .label-left.selected,
        .label-right.selected {
            text-shadow: 0 0 0 currentColor, 0 0 0 currentColor;
        }

        :host([readonly]) .label-left,
        :host([readonly]) .label-right,
        :host([disabled]) .label-left,
        :host([disabled]) .label-right {
            opacity: 0.5;
            text-shadow: none;
        }

        .input-checkbox + .button-label {
            position: relative;
            margin: 0 10px;
            vertical-align: middle;
            display: inline-block;
            height: var(--wc-toggle-bar-height, 1.6em);
            width: var(--wc-toggle-bar-width, 3.2em);
            background-color: var(--wc-toggle-unchecked-bar-color, #53D76A);
            border-radius: var(--wc-toggle-bar-border-radius, var(--wc-toggle-bar-height, 1.6em));
            border: var(--wc-toggle-bar-border, 1px solid #CCC);
            cursor: pointer;
            transition: background-color var(--wc-toggle-transition-time, 0.2s) ease-out;
        }

        :host([readonly]) .input-checkbox + .button-label,
        :host([disabled]) .input-checkbox + .button-label {
            background-color: var(--wc-toggle-disabled-bar-color, #DDD);
        }

        .input-checkbox+.button-label:after {
            content: '';
            background-color: var(--wc-toggle-unchecked-button-color, #FFF);
            position: absolute;
            display: block;
            height: 100%;
            width: 50%;
            border-radius: 2em;
            border: var(--wc-toggle-button-border, 1px solid #999);
            box-shadow: var(--wc-toggle-button-shadow, 0 1px 1px 0px #999);
            top: -1px;
            left: -1px;
            transition: left var(--wc-toggle-transition-time, 0.2s) ease-out;
        }

        .input-checkbox:checked+.button-label {
            background-color: var(--wc-toggle-checked-bar-color, #53D76A);
        }

        :host([readonly]) .input-checkbox:checked + .button-label,
        :host([disabled]) .input-checkbox:checked + .button-label {
            background-color: var(--wc-toggle-disabled-bar-color, #DDD);
        }

        .input-checkbox:checked+.button-label:after {
            left: calc(50% - 1px);
            background-color: var(--wc-toggle-checked-button-color, #FFF);
        }
    </style>

    <div class="toggle-element">
        <label class="label-left" for="wc-toggle-checkbox">
            <slot name="left"></slot>
        </label>
        <input class="input-checkbox" type="checkbox" id="wc-toggle-checkbox"></input>
        <label class="button-label" for="wc-toggle-checkbox"></label>
        <label class="label-right" for="wc-toggle-checkbox">
            <slot name="right"></slot>
        </label>
    </div>
</template>
<script>
  (() => {
    const doc = (document._currentScript || document.currentScript).ownerDocument;
    class WCToggle extends HTMLElement {
        static get observedAttributes() {
            return ['value', 'disabled', 'readonly'];
        }
        constructor() {
            super();

            this.createTemplate();
            this._checked = false;
        }

        createTemplate() {
            const template = doc.querySelector('#wc-toggle-template');
            this.attachShadow({mode: 'open'});
            this.shadowRoot.appendChild(template.content.cloneNode(true));

            this.$_checkbox = this.shadowRoot.querySelector("#wc-toggle-checkbox");
            this.$_labelLeft = this.shadowRoot.querySelector(".label-left");
            this.$_labelRight = this.shadowRoot.querySelector(".label-right");
            this._readValues();
            this._setLabels();
        }

        connectedCallback() {
            this.$_checkbox.addEventListener("click", this._toggleValue.bind(this));
        }

        disconnectedCallback() {
            this.$_checkbox.removeEventListener("click", this._toggleValue.bind(this));
        }

        _readValues() {
            this._valueLeft = this.getAttribute("value-left");
            this._valueRight = this.getAttribute("value-right");

            this.disabled = this.hasAttribute("disabled");
            this.readonly = this.hasAttribute("readonly");
            if (this.hasAttribute("value")) {
                this.value = this.getAttribute("value");
                this._updateCheckbox(this.value);
            }
        }

        _updateCheckbox(value) {
            if (!this.disabled) {
                this._checked = value === this._valueRight;
                this.$_checkbox.checked = this._checked;
            }
        }

        _setLabels() {
            const left = this.shadowRoot.querySelector("slot[name=left]");
            const right = this.shadowRoot.querySelector("slot[name=right]");

            left.innerHTML = this._valueLeft;
            right.innerHTML = this._valueRight;
        }

        set value(newValue) {
           this.setAttribute("value", newValue);
           this._updateSelectedClass();

           this.dispatchEvent(new CustomEvent("change", {
                detail: {value: this.value},
                bubbles: true    
            }));
        }

        get value() {
            return this.getAttribute("value");
        }

        set disabled(isDisabled) {
            if (isDisabled) {
                this.setAttribute("disabled", "");
                this.$_checkbox.setAttribute("disabled", "");
            } else {
                this.removeAttribute("disabled");
                this.$_checkbox.removeAttribute("disabled");
            }
        }

        get disabled() {
            return this.hasAttribute("disabled");
        }
        
        set readonly(isReadonly) {
            if (isReadonly) {
                this.setAttribute("readonly", "");
                this.$_checkbox.setAttribute("readonly", "");
            } else {
                this.removeAttribute("readonly");
                this.$_checkbox.removeAttribute("readonly");
            }
        }

        get readonly() {
            return this.hasAttribute("readonly");
        }

        attributeChangedCallback(name, oldValue, newValue) {
            if(name === "value" && this._isValidValue(newValue) && oldValue !== newValue) {
                this.value = newValue;
                this._updateCheckbox(this.value);
            }
 
            if (name === "disabled" && oldValue !== newValue) {
                this.disabled = this.hasAttribute("disabled");
            }

            if (name === "readonly" && oldValue !== newValue) {
                this.readonly = this.hasAttribute("readonly");
            }
        }

        _isValidValue(newValue) {
            return this._valueLeft === newValue || this._valueRight === newValue;
        }

        _toggleValue(event) {
            if (this.disabled || this.readonly) {
                return;
            }
            this._checked = this.$_checkbox.checked;
            if (this._checked) {
                this.value = this._valueRight;
            } else {
                this.value = this._valueLeft;
            }
        }

        _updateSelectedClass() {
            if (this.value === this._valueLeft) {
                this.$_labelLeft.classList.add("selected");
                this.$_labelRight.classList.remove("selected");
            } else if(this.value === this._valueRight) {
                this.$_labelRight.classList.add("selected");
                this.$_labelLeft.classList.remove("selected");
            }
        }
    }

    customElements.define('wc-toggle', WCToggle);
  })();
</script>