Is it possible to set different "rem" for different Web Component with Angular 2's ViewEncapsulation.Native?
<p>I want to make component with ViewEncapsulation.Native which uses Bootstrap 4 where others use Bootstrap 3. Here's component with Bootstrap 4:</p>

<pre><code>import { Component, ViewEncapsulation } from '@angular/core';
import { NgForm }    from '@angular/common';

import { Hero }    from './hero';
@Component({
  selector: 'hero-form',
  templateUrl: 'app/hero-form.component.html',
  styleUrls: ['app/bootstrap.css'], //Bootstrap 4 CSS file
  encapsulation: ViewEncapsulation.Native
})
export class HeroFormComponent {}
</code></pre>

<p>And in <code>index.html</code> Bootstrap 3 is loaded:</p>

<pre><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"&gt;
</code></pre>

<p>The problem is that when Bootstrap 3 is included, it makes everything very small. You can see how it looks in my <a href="https://plnkr.co/edit/gCon3P75pO0hKqrXrLDm?p=preview" rel="nofollow" title="Plunker: Angular 2 ViewEncapsulation.Native  with Bootstrap 3 and Bootstrap 4">Plunker: Angular 2 ViewEncapsulation.Native  with Bootstrap 3 and Bootstrap 4</a>. When Bootstrap 3 is commented, everything looks better. I suppose that problem happens because Bootstrap 4 uses <code>rem</code> to style buttons:</p>

<pre><code>.btn {
    display: inline-block;
    font-weight: normal;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}
</code></pre>

<p>With <a href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="nofollow" title="Bootstrap 4">Bootstrap 4</a>, <code>rem</code>, as root em, is set to <code>16px</code> for <code>html</code> tag:</p>

<pre><code>html {
  font-size: 16px;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}
</code></pre>

<p>But <a href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="nofollow" title="Bootstrap 3.3.6">Bootstrap 3.3.6</a> sets it to <code>10px</code>:</p>

<pre><code>html {
  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</code></pre>

<p>Because Bootstrap 4 styles are included in Shadow DOM, they are not applied to HTML (and that's good). But because of it my component's styles will use <code>10px</code> as <code>rem</code> instead of <code>16px</code>. I have tried to set styles for component itself and for first element in its view:</p>

<pre><code>@Component({
  selector: 'hero-form',
  templateUrl: 'app/hero-form.component.html',
  styleUrls: ['app/bootstrap.css'],
  styles: ['hero-form, #parent-element {font-size: 16px;}'],
  encapsulation: ViewEncapsulation.Native
})
export class HeroFormComponent {}
</code></pre>

<p>But it didn't work. I think it should work in this way by default - if <code>rem</code> will be the same for every Shadow DOM it will make having multiple CSS frameworks in one project (and it could be craaazy useful, for example for migration from Bootstrap 3 to Bootstrap 4) very hard. Is it possible to set different <code>rem</code> for different Web Component, without changing Bootstrap files to do not use <code>rem</code>? Thank you in advance for every help.</p>