Angular 2のViewEncapsulation.Nativeを使用して、異なるWebコンポーネントに対して異なる「rem」を設定することはできますか？

Question

私は他の人がここでブートストラップ3を使用してブートストラップ4は、ブートストラップ4とコンポーネントの使用ViewEncapsulation.Nativeと部品作りたい：ブートストラップ3

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

そしてindex.htmlではロードされます。

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

ブートストラップ3が含まれていると、すべてが非常に小さくなります。あなたはそれが私のPlunker: Angular 2 ViewEncapsulation.Native with Bootstrap 3 and Bootstrap 4で見える方法を見ることができます。ブートストラップ3がコメントされるとき、すべてがより良く見えます。 htmlタグに16pxに設定され、ルートEMとして、

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

Bootstrap 4、rem付：：私はブートストラップ4は、スタイルのボタンにremを使用しているため、その問題が発生したと仮定し

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

しかしBootstrap 3.3.6セット、それをします10px：

html { 
    font-size: 10px; 

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

ブートストラップ4スタイルsはShadow DOMに含まれていますが、HTMLには適用されません（それは良いことです）。しかしそのため、私のコンポーネントのスタイルは16pxの代わりにをremとして使用します。

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

しかし、それは動作しませんでした。コンポーネント自体のスタイルと、ビューの最初の要素のスタイルを設定しようとしました。私はそれがデフォルトでこのように動作するはずだと思います - remがすべてのシャドーDOMで同じであれば、1つのプロジェクトで複数のCSSフレームワークを持つことになります（ブートストラップ3からブートストラップ4への移行など、とても厳しい。 remを使用しないようにブートストラップファイルを変更することなく、別のWebコンポーネントに異なるremを設定することはできますか？すべての助けのために事前にありがとうございます。

Answer 1

私はremを変更する方法がないと思いますが、あなたはこのようなものを活用することができます：

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

も参照してくださいhttps://plnkr.co/edit/ZlEZ7230O6SzRjNRyRvN?p=preview