?! Missing Label ?!

[angrycat9000]

Problem

Running the distribution code through Babel causes ?! Missing Label ?! to appear on items that have the label set via the attribute instead of the slot.

Cause

Terser compresses the Item.attributeChangedCallback to:

  attributeChangedCallback(t, e, s) {
    const i = null !== s;
    switch (t) {
      case "disabled":
        this.shadowRoot.querySelector("button").setAttribute("aria-disabled", i);
        break;
      case "isdefaultfocus":
        this.shadowRoot.querySelector("button").setAttribute("tabindex", null == s ? -1 : 0);
        break;
      case "label":
        const t = this.shadowRoot.querySelector("slot[name=label]");
        for (; t.firstChild;) t.removeChild(t.firstChild);
        t.appendChild(document.createTextNode(s))
    }
  }

This is valid code, if it is run through Babel, it produces:

function attributeChangedCallback(t, e, s) {
      var i = null !== s;

      switch (_t) {
        case "disabled":
          this.shadowRoot.querySelector("button").setAttribute("aria-disabled", i);
          break;

        case "isdefaultfocus":
          this.shadowRoot.querySelector("button").setAttribute("tabindex", null == s ? -1 : 0);
          break;

        case "label":
          var _t = this.shadowRoot.querySelector("slot[name=label]");

          for (; _t.firstChild;) {
            _t.removeChild(_t.firstChild);
          }

          _t.appendChild(document.createTextNode(s));
      }
    }

Note the _t variable use in the switch statement outside of the block it is declared in. This hide the function argument. Execution then misses the case 'label' branch. This results in the missing label message.

Opened https://github.com/babel/babel/issues/11509