Both of these encapsulation features can be disabled on a per-component basis using the ViewEncapsulation.None switch in the following way:
import { Component, Input, ViewEncapsulation } from "@angular/core";@Component({ selector: "quiz-search", templateUrl: './quiz-search.component.html', styleUrls: ['./quiz-search.component.css'], encapsulation: ViewEncapsulation.None})export class QuizSearchComponent { @Input() class: string; @Input() placeholder: string;}
With ViewEncapsulation.None, neither the HTML5 attribute nor the #shadow-root element will be used; this basically means that all the CSS classes defined for that component will be shared among all the other components and applied globally, just like the good old ...
