joicomponents/book/chapter7_html_comp/demo/StubbornAttribute.html

Design patterns to build native web components

<script>
  class StubbornComponent extends HTMLElement {

    constructor() {
      super();
      this.__stubborn = null;
      setInterval(this.flip.bind(this), 2000);
    }

    static get observedAttributes() {
      return ["_stubborn", "_just_dont"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
      if (name === "_stubborn") {
        if (newValue !== this.__stubborn)
          this.__stubborn !== null ? this.setAttribute(name, this.__stubborn) : this.removeAttribute(name);
      }
      if (name === "_just_dont") {
        if (newValue !== null)
          this.removeAttribute(name);
      }
    }

    flip() {
      this.__stubborn === null ?
        this.setAttribute("_stubborn", this.__stubborn = "") :
        (this.__stubborn = null ) || this.removeAttribute("_stubborn");
    }
  }

  customElements.define("stubborn-component", StubbornComponent);
</script>

<style>
  stubborn-component[sunshine] {
    border: 2px solid yellow;
  }
  stubborn-component[_stubborn] {
    border-bottom: 2px solid orange;
  }
  stubborn-component[_just_dont] {
    border-top: 20px solid red;
  }
</style>

<stubborn-component _stubborn _just_dont sunshine>Hello sunshine!</stubborn-component>

<script>
  setInterval(function () {
    var el = document.querySelector("stubborn-component");
    el.hasAttribute("sunshine") ? el.removeAttribute("sunshine") : el.setAttribute("sunshine", "");
    el.hasAttribute("_just_dont") ? el.removeAttribute("_just_dont") : el.setAttribute("_just_dont", "");
    el.hasAttribute("_stubborn") ? el.removeAttribute("_stubborn") : el.setAttribute("_stubborn", "");
  }, 1000);
</script>