Message boxes in Polymer applications

I am working on my first bigger Polymer application and currently have around 30 components. Most of the components need to be able to display (modal) message boxes. For this I implemented a message box component wrapping paper-dialog (similar to other message box components available).

What I don't like is that in every component which wants to display message boxes I need to define an element

<my-message-box id="message-box"></my-message-box>

and then call it like this

this.$["message-box"].information("Something happened...");

This works but my gut feeling is that a message box should be more like a global service, a singleton maybe. In C# f.e. there exists a static method on the MessageBox class.

Is the above mechanism really the recommended way to do it or are there better solutions to it?

Solution

My current approach is to create error-dialog and add it as a sibling to my main-app in index.html:

<body>
  <main-app></main-app>
  <error-dialog></error-dialog>
  <noscript>
    Please enable JavaScript to view this website.
  </noscript>
</body>

error-dialog's ready() method adds a custom event:

ready() {
  super.ready();
  this.addEventListener('o_error', e => this._errorListener(e));
}

_errorListener(e) {
  this.o_error = e.detail;
  this.$.errorDlog.open();
}

Now I can open error-dialog from anywhere with

let msg = ...
const dlog = document.querySelector('error-dialog');
dlog.dispatchEvent(new CustomEvent('o_error', {detail: msg, bubbles: true, composed: true}));