是否有可能爲Angular 2的ViewEncapsulation.Native爲不同的Web組件設置不同的「rem」？

我想和ViewEncapsulation.Native組件，它採用引導4在別人使用引導3.這裏的組件與引導4：是否有可能爲Angular 2的ViewEncapsulation.Native爲不同的Web組件設置不同的「rem」？

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引導3加載：

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

的問題是，當包含Bootstrap 3時，它使得一切都非常小。你可以在我的Plunker: Angular 2 ViewEncapsulation.Native with Bootstrap 3 and Bootstrap 4中看到它的外觀。當Bootstrap 3被評論時，一切看起來都更好。我想發生這個問題，因爲引導4使用rem樣式按鈕：

.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，作爲根EM，設置爲16px爲html標籤：

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

因爲Bootstrap 4樣式s包含在Shadow DOM中，它們不適用於HTML（這很好）。但因爲它，我的組件的樣式將使用10px作爲rem而不是16px。我曾嘗試設置樣式組件本身和它認爲第一個元素：

@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對於每個Shadow DOM都是相同的，那麼它將在一個項目中使多個CSS框架（並且可能是有用的，例如從Bootstrap 3到Bootstrap 4的遷移）很難。是否可以爲不同的Web組件設置不同的rem，而不更改Bootstrap文件以不使用rem？提前感謝您的幫助。

來源

2016-06-15 Radek Anuszewski

有什麼你想使用'ViewEncapsulation.Native'的具體原因？爲此，您需要爲非Chrome瀏覽器加載polyfills。我非常確定Boostrap在啓用本地Shadow DOM時無法正常工作。你有沒有任何參考指出Bootstrap可以與Shadow DOM一起使用以及如何使用？ –

@GünterZöchbauer使用'ViewEncapsulation.Emulated'我得到了同樣的結果，沒有具體的理由使用'ViewEncapsulation.Native'，但這是一個嘗試（不是生產代碼） - 如果這是一個可能性， ViewEncapsulation.Native'，這將是偉大的:) –

我覺得沒有辦法改變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;}

又見plunkr https://plnkr.co/edit/ZlEZ7230O6SzRjNRyRvN?p=preview

來源

2016-06-15 19:21:00 yurzui

是否有可能爲Angular 2的ViewEncapsulation.Native爲不同的Web組件設置不同的「rem」？

回答

相關問題