CODEWITHSUNDEEP
javascripthtmldomshadow-domicon-fonts
AdamKniec
AdamKniec

Reputation: 1717

Shadow DOM with font in external CSS files issue

I've recently decided to use the ShadowDOM to encapsulate the styles in my project. At the very begining it I thought it worked as expected but I've noticed that some of the icons coming from the external CSS files were gone.

I've prepared the code to demonstrate the issue (look at the snippet below).

As You can see, HTML containing the external CSS file with icons works as expected outside the ShadowDOM. I'd like to use it inside the shadowDOM as well.

How can I achieve that ?

const body = document.getElementsByTagName('body')[0];
const wrapper = document.querySelector('.wrapper')

const handleAddToShadowClick = (param) => {
  const host = document.querySelector('#shadowHost');
  if(param === 'insideShadow') {
    const shadowRoot = host.attachShadow({mode: 'open'});
     shadowRoot.innerHTML = firstComponent
  } else {
    const shadowRoot = host;
    wrapper !== null ? body.removeChild(wrapper): '' 
    shadowRoot.innerHTML = firstComponent
  }
}

const firstComponent = `
<div class="wrapper">
  <div class="icon login">Bla bla</div>
  <div style="font-family: testFont;">Sample String od text</div>
  <link rel="stylesheet" href="./style.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</div>  
`
.wrapper {
    font-family: agGridBalham;
    background-color: aquamarine;
    color: black;
}

.balham:before {
    content: "\F11F";
}

.login::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; 
    content: "\f007";
  }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      Refresh the page after each button click
    </p>
    <button onclick="handleAddToShadowClick('outside')">Add outside shadow</button>
    <button onclick="handleAddToShadowClick('insideShadow')">Add inside shadow</button>  
<div>
  <div id="shadowHost"> </div> 
</div>
    
    <script src="./script.js"></script>
  </body>
</html>

IMPORTANT NOTE: I'm aware that this post is similar to: How to let imported css font / icons have effects on elements in the shadow dom?

but it's not the case. I do not want to load the style in the light-dom. Besides fonts - rest of the styles works as expected.

Upvotes: 1

Views: 94

Answers (0)

Related Questions