How to use elements-sk - 10 common examples

// a CustomEvent here.
    const fetchErrorEvent = e as CustomEvent;
    const error = fetchErrorEvent.detail.error;
    const loadingWhat = fetchErrorEvent.detail.loading;
    if (fetchErrorEvent.detail.error.name !== 'AbortError') {
      // We can ignore AbortError since they fire anytime an AbortController was canceled.
      // Chrome and Firefox report a DOMException in this case:
      // https://developer.mozilla.org/en-US/docs/Web/API/DOMException
      console.error(error);
      errorMessage(`Unexpected error loading ${loadingWhat}: ${error.message}`, 5000);
    }
    this.finishedTask();
  }
}

define('gold-scaffold-sk', GoldScaffoldSk);

}).then((resp) => {
      if (resp.ok) {
        // Triaging was successful.
        this.status = newStatus;
        this.triageHistory.unshift({
          user: 'me',
          ts: Date.now().toString(),
        });
        this._render();
        sendEndTask(this);
      } else {
        // Triaging did not work (possibly because the user was not logged in). We want to set
        // the status of the triage-sk back to what it was to give a visual indication it did not
        // go through. Additionally, toast error message should catch the user's attention.
        console.error(resp);
        errorMessage(
            `Unexpected error triaging: ${resp.status} ${resp.statusText} ` +
            '(Are you logged in with the right account?)', 8000);
        this.querySelector('triage-sk')!.value = this.status;
        this._render();
        sendEndTask(this);
      }
    }).catch((e) => {
      sendFetchError(this, e, 'triaging')

//   - commit 4 has incorrect data
        // In this case, we need to make sure we can create a blamelist that starts on the first
        // real commit after commit 2. Therefore, we include commit 2 in the list, which GitHub
        // and googlesource will automatically elide when we ask for a range of history (in
        // blamelist-panel-sk). If there were no preceding missing digests, this will equal x-1.
        lastNonMissingIndex = i;
        break;
      }
    }
    const blamelist = this._commits.slice(lastNonMissingIndex, x + 1);
    blamelist.reverse();
    return blamelist;
  }
}

define('dots-sk', DotsSk);

<div class="triggering-spinner">
        
      </div>
      <button>Queue Task
      </button>
    
  
  
    
      <button id="view_history">View runs history</button>
    
  

`;

define('chromium-builds-sk', class extends ElementSk {
  constructor() {
    super(template);
    this._triggeringTask = false;
    this._moreThanThreeActiveTasks = moreThanThreeActiveTasksChecker();
  }

  connectedCallback() {
    super.connectedCallback();
    this._render();
    // Load LKGR data.
    this._chromiumRevChanged();
    this._skiaRevChanged();
  }


  _chromiumRevChanged() {

});
      const results = (await jsonOrThrow(request)) as RunResults;

      // The .text field returned is empty, so repopulate it with the value we
      // stored in body.
      results.text = body.code;
      this.runResults = results;
      this._render();
      this.dispatchEvent(
        new CustomEvent('fiddle-success', {
          detail: this._runResults.fiddleHash,
          bubbles: true,
        }),
      );
    } catch (error) {
      errorMessage(error);
    } finally {
      this.spinner!.active = false;
    }
  }

constructor() {
    super();
    upgradeProperty(this, 'job');
    upgradeProperty(this, 'commit');
    // Bits of state that get reflected to/from the URL query string.
    this._query = {
      job: '',
      commit: '',
    }
  }

this._suggestionSelected = -1;
    this._render();
  }

  _suggestionClick(e: Event): void {
    const item = e.target as HTMLElement;
    if (item.tagName !== 'LI') {
      return;
    }
    const index = Array.from(item.parentNode!.children).indexOf(item);
    this._suggestionSelected = index;
    this._commit();
  }
}

define('suggest-input-sk', SuggestInputSk);

this.pauseTime = 0;
    this._render();
  }

  private togglePlaying() {
    if (this.playing) {
      this.pauseTime = this.time;
    } else {
      this.time = this.pauseTime;
    }
    this.playing = !this.playing;
    this._render();
  }
}

define('uniform-time-sk', UniformTimeSk);

this.selectedCorpus = corpus;
      this._sendCorpusSelected();
    }
  }

  private _sendCorpusSelected() {
    this.dispatchEvent(
      new CustomEvent('corpus-selected', {
        detail: this._selectedCorpus!,
        bubbles: true,
      }),
    );
  }
};

define('corpus-selector-sk', CorpusSelectorSk);

return false;
  }

  get uniform(): Uniform {
    return this._uniform;
  }

  set uniform(val: Uniform) {
    if (val.columns !== 3 || val.rows !== 1) {
      throw new Error('The imageresolution uniform must be a float3.');
    }
    this._uniform = val;
  }
}

define('uniform-imageresolution-sk', UniformImageresolutionSk);