title: Angular 5 styling elements within component without scope
body: <p>I have an Angular component which is embedding a Microsoft PowerBI Report. The <code>powerbi-client</code> takes a <code>nativeElement</code> from a <code>ElementRef</code> and injects an iframe with the embedded report. I want to style the border (remove it) on the iframe itself. The issue is Angular CLI is encapsulating the SCSS but the PowerBI library is injecting the iframe, so angular doesn't 'know about it', thus no encapsulation attributes on element e.g. <code>_ngcontent-c8</code>.</p>
  
  <pre><code>@Component({
    selector: 'app-report',
    template: `
    &lt;div style="height:100%; width: 100%;" class="powerbi-frame" #frame&gt;&lt;/div&gt;
    `,
    styleUrls: ['./report.component.scss']
  })
  export class ReportComponent implements OnInit {
    @Input() accessToken: string;
    @Input() embedUrl: string;
    @Input() id: string;
    @ViewChild('frame') frame: ElementRef;
  
    private _report: pbi.Report;
    private _reportloaded = false;
    constructor( @Inject('PowerBIClientService') private _client: pbi.service.Service) { }
  
    ngOnInit() {
      const config: pbi.IEmbedConfiguration = {
        accessToken: this.accessToken,
        tokenType: pbi.models.TokenType.Embed,
        embedUrl: this.embedUrl,
        type: 'report',
        id: this.id,
        settings: {
          filterPaneEnabled: false
        }
      };
  
      this._report = this._client.embed(this.frame.nativeElement, config) as pbi.Report;
  
      this._report.on('loaded', ev =&gt; this._reportloaded = true);
    }
  }
  </code></pre>
  
  <p><em>report.component.scss</em></p>
  
  <pre><code>.powerbi-frame iframe {
    border-width: 0px;
    border-style: none;
  }
  </code></pre>
  
  <p>I am looking for a way to do something like:</p>
  
  <pre><code>.powerbi-frame :no-encapsulation(iframe) {
    border-width: 0px;
    border-style: none;
  }
  </code></pre>
  
  <p>Which should generate something along the lines of: </p>
  
  <pre><code>.powerbi-frame[_nghost-c8] iframe { &lt;-- note no scoping on iframe selector
    border-width: 0px; 
    border-style: none; 
  }
  </code></pre>
  
  <p>I understand I could put these rules in my main styles.scss, but that seems like kind of a hack. Can anyone point me toward a more correct way of achieving styling an unscoped element within an angular component?</p>