JSFiddle - React, Tailwind, and code Playground

by Aikepaer Abuduweili

HTML

<link href="https://static.production.devnetcloud.com/fontawesome/css/fontawesome-all.min.css" rel="stylesheet">
<style>
  p {
    color: #00f !important;
    font-size: 24px;
  }

</style>

<p>
  Eternal icon
</p>

<i class="far fa-comment-alt-edit"></i>

<my-comp></my-comp>

JavaScript

class MyWebComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: "open"
    });
    console.log(window, document)
  }
  connectedCallback() {

		// get fontawesome style
    let a = window.document.createElement('i');
    a.classList.add('far')
    a.classList.add('fa-comment-alt-edit')
    document.body.appendChild(a)
    let _style = window.getComputedStyle(a).cssText;
    let _before_style = window.getComputedStyle(a,':before').cssText;
		window.document.body.removeChild(a)
    
    
    this.shadowRoot.innerHTML = `
        <style>
        
        .far.fa-comment-alt-edit{
          ${_style}
        } 
        
        .far.fa-comment-alt-edit:before{
        	${_before_style}
        }
        
        p {
            color: #f00;
            padding:40px !important;
        }
    </style>
            <p>Internal icon : <i class="far fa-comment-alt-edit"></i></p>
            
        `;
  }
}

window.customElements.define("my-comp", MyWebComponent);