JS

const template = document.createElement('template');
template.innerHTML = `
<!-- we can link to a style sheet from our template too -->
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
<style>
    .heading{
        background-color:orange;
        display: flex;
        // flex-direction: row;
        padding: 20px 0px; 
        
       
    }
    .title{
        color : white;
        font-family:sans-serif;
        font-weight: bold;
    }
    .infobox{
        border: 1px solid black;
        margin: 15px auto;
        width: 47vw;
    }
    .message{
        font-family:sans-serif;
    }
    
</style>

<div class="infobox">
    <div class="heading">
        <div class="icon center">
            <i class="fa fa-info-circle fa-lg fa-inverse fa-fw" aria-hidden="true"></i>
        </div>
        <div class="title">
            <p>
                <slot name="title">TITLE GOES HERE</slot>
            </p>
        </div>
    </div>
    <div class="message">
        <slot name="message">MESSAGE</slot>
    </div>
</div>
`
//Creates a custom HTML element from the class infobox
//Extends with shadow DOM
class infobox extends HTMLElement {
    constructor() {
      super();
  
      this.attachShadow({ mode: "open" });
  
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
  
  window.customElements.define("info-message", infobox);