code: function trigger(eventName, details) {
      const evt = new CustomEvent(eventName, {
        detail: details,
        bubbles: true,
        cancelable: true,
      });
      this.dispatchEvent(evt);
      return !evt.defaultPrevented;
    }
docs: Triggers a dom level event which bubbles up the dom.
  
  Call with an event name and a `detail` object:
  
  ```
  this.trigger('something-happened', {
  someSortOf: 'value'
  });
  ```
  
  The `someSortOf` key, and any other keys you pass into that object can be accessed via `evt.detail.someSortOf` or `evt.detail.xxxx`:
  
  ```
  // Listen for the something-happened event which because it bubbles up the dom,
  // can be listened for from any parent node
  document.body.addEventListener('something-happened', function(evt) {
  console.log(evt.detail.someSortOf);
  });
  ```
  
  {@link Layer.UI.Component#events} can be used to generate properties to go with your events, allowing
  the following widget property to be used:
  
  ```
  this.onSomethingHappened = function(evt) {
  console.log(evt.detail.someSortOf);
  });
  ```
  
  Note that events may be canceled via `evt.preventDefault()` and your code may need to handle this:
  
  ```
  if (this.trigger('something-is-happening')) {
  doSomething();
  } else {
  cancelSomething();
  }
  ```
  
  @method trigger
  @protected
  @param {String} eventName
  @param {Object} detail
  @returns {Boolean} True if process should continue with its actions, false if application has canceled
  the default action using `evt.preventDefault()`