@font-face in global.scss is not recognized when shadow is true

[lucascco]

Stencil version:

 @stencil/core@1.4.0 

I'm submitting a:
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
When I set the shadow as true, my @font-face added in global.scss is not recognized in my-component.scss

Expected behavior:
The @font-face should be recognized when used in attr css font-family.

Steps to reproduce:

Related code:

stencil.config.ts

export const config: Config = {
  plugins: [
    sass({
      injectGlobalPaths:[
        'src/global/style/global.scss',
      ],
    }),
  ],
}

global/style/global.scss

@font-face {
  font-family: LatoTest;
  src: url(assets/fonts/Lato-Regular.woff2) format('woff2'),
       url(assets/fonts/Lato-Regular.woff) format('woff');
}

@font-face {
  font-family: MontserratTest;
  src: url(assets/fonts/Montserrat_regular.ttf)  format('truetype');
}

my-component/my-component.scss

.nav-container {
  width: 100%;
  background: white;
  position: fixed;
  left: 0;
  top: 0;
  font-family: 'MontserratTest';
}

my-component/my-component.tsx

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss',
  shadow: false,
})
export class MyComponent {
  render () {
    return (
      <div class="nav-container">
          My component
      </div>
    );
  }
}

Other information:
The global style is added inside the shadow but don't working.

[Nightmaster]

@font-face is not working properly in some browsers when it's declared in a shadowDOM. The workaround is to create a style element with JS and to append it to your head:

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss',
  shadow: false,
})
export class MyComponent {
  componentWillLoad() {
    const fontDeclarationElement: HTMLStyleElement = document.createElement('style');

  fontDeclarationElement.textContent +=
    '@font-face{font-family:LatoTest;src:url(assets/fonts/Lato-Regular.woff2) format("woff2"),url(assets/fonts/Lato-Regular.woff) format("woff");}'
    + '@font-face{font-family:MontserratTest;src:url(assets/fonts/Montserrat_regular.ttf)  format("truetype");}';
    document.head.append(fontDeclarationElement)
  }

  render () {
    return (
      <div class="nav-container">
          My component
      </div>
    );
  }
}

This should clear your problem.

N.B.: Personally I add an id to the style element to be sure to not create it multiple times.