I'm interested in creating a component with ViewEncapsulation.Native that utilizes Bootstrap 4 while others are using Bootstrap 3. Below is the component code with Bootstrap 4:
import { Component, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@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 {}
In the index.html, Bootstrap 3 is loaded:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
Issues arise when Bootstrap 3 is included as it affects the sizing of elements. You can view the differences on this Plunker link. The problem seems to be related to the use of rem units for styling buttons in Bootstrap 4:
.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 sets rem (root em) to 16px for the html tag:
html {
font-size: 16px;
}
On the other hand, Bootstrap 3 sets it to 10px:
html {
font-size: 10px;
}
Due to Bootstrap 4 styles being enclosed within Shadow DOM, they do not affect the global HTML styling which results in components inheriting the smaller rem value. Various attempts to override this behavior at the component level have been unsuccessful so far.
The challenge remains to manage differing rem values for different Web Components without altering underlying Bootstrap files. Any insights or solutions would be highly appreciated. Thank you.