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 CSS cascading rules we're well aware of.

This behavior can be useful to propagate some general-purpose CSS styling from high-level components; that's not the case of our QuizSearchComponent, so let's perform a quick source code rollback by deleting all the references to the ViewEncapsulation enum from the class file's import list and @Component section and deep dive into our inner components' restyling task.