是否可以为具有 Angular 2 的 ViewEncapsulation.Native 的不同 Web 组件设置不同的 "rem"？

Question

我想用 ViewEncapsulation.Native 制作组件，它使用 Bootstrap 4，而其他人使用 Bootstrap 3。这是 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 {}

并在 index.html Bootstrap 中加载了 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 时，一切看起来都更好。我想这个问题的发生是因为 Bootstrap 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，为 html 标签设置为 16px：

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 种样式包含在 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？预先感谢您的帮助。

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

另请参阅 plunkr https://plnkr.co/edit/ZlEZ7230O6SzRjNRyRvN?p=preview

是否可以为具有 Angular 2 的 ViewEncapsulation.Native 的不同 Web 组件设置不同的 "rem"？

Is it possible to set different "rem" for different Web Component with Angular 2's ViewEncapsulation.Native?

css

web-component

twitter-bootstrap

bootstrap-4

angular