How can I re-render my component when a property to it changes (webcomponents)

Question

Here is my submit button component:

class SubmitButton extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
        this.isLoading = this.getAttribute('loading') === 'true';
        console.log('isLoading: ', this.isLoading);
        this.button = `<button>Go</button>`;
        this.spinner = `
            <svg class="spinner" viewBox="0 0 50 50">
                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
            </svg>`
    this.innerHTML = `
      <style>      
            button {
                margin-left: 1rem;
            }

            .spinner {
              // animations and stuff
            }
      </style>
            ${this.isLoading ? this.spinner : this.button}
`;
  }
}

customElements.define("submit-button", SubmitButton);

I'm calling it with <submit-botton loading="true"></submit-button> however when I dynamically change the property with js (ie: fetch finishes), the button does not re-render itself.

Is there anyway to get it to re-render?

I'm changing the value of the property with this code:

const button = document.querySelector('submit-button');
button.loading = true;
// do some fetching
button.loading = false;

Edit: here is an update using changedAttributes handler but it still doesn't work:

class SubmitButton extends HTMLElement {
  constructor() {
    super();
        this.isLoading = this.getAttribute('loading') === 'true';
  }

    static get observedAttributes() {
        return ['loading'];
    }

     get loading() {
             return this.isLoading;
     }

     set loading(val) {
            this.isLoading = val === 'true';
     }

    render() {
        this.button = `<button>Go</button>`;
        this.spinner = `
            <svg class="spinner" viewBox="0 0 50 50">
                <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
            </svg>`
    this.innerHTML = `
      <style>      
            button {
                margin-left: 1rem;
            }

            .spinner {
                animation: rotate 2s linear infinite;
                z-index: 2;
                width: 4rem;
                height: 4rem;
                margin-left: 1rem;
            }

            .path {
                stroke: #633;
                stroke-linecap: round;
                animation: dash 1.5s ease-in-out infinite;
            }

            @keyframes rotate {
                100% {
                    transform: rotate(360deg);
                }
            }

            @keyframes dash {
                0% {
                    stroke-dasharray: 1, 150;
                    stroke-dashoffset: 0;
                }
                50% {
                    stroke-dasharray: 90, 150;
                    stroke-dashoffset: -35;
                }
                100% {
                    stroke-dasharray: 90, 150;
                    stroke-dashoffset: -124;
                }
            }
      </style>
            ${this.isLoading ? this.spinner : this.button}
`;

    }

  connectedCallback() {
        console.log('isLoading: ', this.isLoading);
        this.render();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        console.log('attr changed: ',name, oldValue, newValue);
        this.render();
  }
}

customElements.define("submit-button", SubmitButton);

Answer 1

That was fun, thanks for asking the question. I borrowed some code from https://developers.google.com/web/fundamentals/web-components/customelements and created this JSFiddle.

Basically, I didn't worry about whether loading was "true" or "false", merely checked for the existence of the attribute:

get loading() {
  return this.hasAttribute('loading');
}

set loading(val) {
  if (val) {
    this.setAttribute('loading', '');
  } else {
    this.removeAttribute('loading');
  }
}

After that, it was a matter of checking this.loading. Please do check the JSFiddle though.