NVOrrM

index.html

  <script>
    const QA = (q, d) => Array.prototype.slice.call((d||document).querySelectorAll(q), 0);
    const QS = (q, d) => (d||document).querySelector(q);
    const QD = (e, D) => {
      e.QS = (q, d) => QS(q, d || D);
      e.QA = (q, d) => QA(q, d || D);
    }    
    const  IU = v     =>               v === undefined;
    const INU = v     => v === null || v === undefined;
    const IN  = v     => v === null;
  </script>

  <template id="push-message">
    <style>
      :host { gap: .2rem; }
      :host { font-family: sans-serif; }
      msg {
        display: grid; grid-gap: var(--gap);
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr 1fr 1fr auto;
        grid-template-areas:
          "t t t t t b"
          "m m m m m c"
          "m m m m m c"
          "i i i i i i"
          "x x x y y y";
        background: #eee;       
      }
      [title]:before { grid-area: t; content: attr(title); align-self: center; }
       [body]:after  { grid-area: m; content: attr(body);  align-self: center; }
      .badge         { grid-area: b; height: 2rem; justify-self: right; }
      .icon          { grid-area: c; height: 4rem; justify-self: right; }
      .image         { grid-area: i; height: 8rem; justify-self: center; }
      img:not([src]) { display: none; }
    </style> 
    <msg>
      <img class="badge">
      <img class="icon">
      <img class="image">
    </msg>
  </template>

  <script>    
    const wpm = 'push-message';
    customElements.define(wpm,
      class extends HTMLElement {
        constructor() {
          super();         
          const l = QS(`#${wpm}`).content.cloneNode(true);
          const s = this.attachShadow({ mode: 'open' }); s.appendChild(l);
          QD(this, this.shadowRoot);
        }
        A(a, n) {
          if (arguments.length == 1)         return this.   getAttribute(a);
          if (n === null || n === undefined) return this.removeAttribute(a);
          else                               return this.   setAttribute(a, n), this.getAttribute(a);
        }
        static get observedAttributes() { return [ "badge", "icon", "image", "title", "body" ]; }
        attributeChangedCallback(a, o, n) {
          if (/^(badge|icon|image)$/.test(a)) 
            if (n !== null) this.QS(`.${a}`).src = n;
            else            this.QS(`.${a}`).removeAttribute('src');
          if (/^(title|body)$/.test(a)) 
            if (n !== null) this.QS(`msg`).setAttribute(a, n);
            else            this.QS(`msg`).removeAttribute(a);
        }
      });    
  </script>

  <push-message 
     title="Title"
      body="Body"
     badge="//ke2.io/favicon.ico"
      icon="//ke2.io/favicon.ico"
     image="//ke2.io/favicon.ico"></push-message>
  <p>ok</p>
    
  <script>
    QS('push-message').A('image');
    console.info("p", QS('push-message').A('body'));
  </script>

nvorrm.markdown

NVOrrM

A Pen by Cetin Sert on CodePen.

License.

style.css

img { display: none !important; }