Ist es möglich, verschiedene "rem" für verschiedene Web-Komponente mit Angular 2's ViewEncapsulation.Native?

Question

Ich möchte mit ViewEncapsulation.Native machen Komponente, die 4 Bootstrap verwendet, wo andere Bootstrap verwenden 3. Hier Komponente ist mit Bootstrap 4:

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 {} 

Und in index.html Bootstrap 3 geladen ist:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 

Die Problem ist, dass wenn Bootstrap 3 enthalten ist, es alles sehr klein macht. Sie können sehen, wie es in meinem Plunker: Angular 2 ViewEncapsulation.Native with Bootstrap 3 and Bootstrap 4 aussieht. Wenn Bootstrap 3 kommentiert wird, sieht alles besser aus. Ich nehme an, dass Problem tritt auf, weil Bootstrap 4 rem zu Schaltflächen verwendet:

.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; 
} 

Mit Bootstrap 4, rem als root em, eingestellt ist 16px für html tag:

html { 
    font-size: 16px; 
    -ms-overflow-style: scrollbar; 
    -webkit-tap-highlight-color: transparent; 
} 

Aber Bootstrap 3.3.6 setzt es 10px:

html { 
    font-size: 10px; 

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 

Weil Bootstrap 4 Stil s sind in Shadow DOM enthalten, sie werden nicht auf HTML angewendet (und das ist gut). Aber deswegen werden die Stile meiner Komponente 10px als rem anstelle von 16px verwenden. Ich habe versucht, Stile für die Komponente selbst und für das erste Element in seiner Ansicht zu setzen:

Aber es hat nicht funktioniert. Ich denke, dass es standardmäßig so funktionieren sollte - wenn für jedes Shadow-DOM gleich ist, macht es mehrere CSS-Frameworks in einem Projekt (und es könnte sehr nützlich sein, zum Beispiel von Bootstrap 3 nach Bootstrap 4 zu migrieren) sehr schwer. Ist es möglich, verschiedene rem für verschiedene Web Component zu setzen, ohne Bootstrap-Dateien zu ändern, um nicht rem zu verwenden? Vielen Dank im Voraus für jede Hilfe.

Answer 1

Ich denke, es gibt keine Möglichkeit, rem zu ändern, aber Sie so etwas wie dies nutzen könnten:

@Component({ 
    selector: 'hero-form', 
    templateUrl: 'app/hero-form.component.html', 
    styleUrls: ['app/bootstrap.css', 'app/my.css'], 

my.css

.btn {font-size: 16px;} 
.form-control { font-size: 14px;} 

Siehe auch plunkr https://plnkr.co/edit/ZlEZ7230O6SzRjNRyRvN?p=preview