<p dir="auto">Only in 4.x.</p>
<h2 dir="auto">I'm submitting a...</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] Feature request"><pre class="notranslate"><code class="notranslate">[x] Feature request</code></pre></div>
<h2 dir="auto">Current behavior</h2>
<p dir="auto">Currently, we set the view encapsulation at the component level.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
	selector: 'song-track',
	encapsulation: ViewEncapsulation.Native
})"><pre class="notranslate"><code class="notranslate">@Component({
	selector: 'song-track',
	encapsulation: ViewEncapsulation.Native
})
</code></pre></div>
<p dir="auto">Meaning that if I want to use native Shadow DOM throughout my app, I have to add that bit of configuration to every single component.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">It would be great if I could set it at the module level.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@NgModule({
	imports: [...],
	declarations: [...],
	providers: [
		...
		{ provide: ViewEncapsulationMode, useValue: ViewEncapsulation.Native },
		...
	],
	bootstrap: [AppComponent]
})
export class AppModule { }"><pre class="notranslate"><code class="notranslate">@NgModule({
	imports: [...],
	declarations: [...],
	providers: [
		...
		{ provide: ViewEncapsulationMode, useValue: ViewEncapsulation.Native },
		...
	],
	bootstrap: [AppComponent]
})
export class AppModule { }
</code></pre></div>
<h2 dir="auto">What is the motivation / use case for changing the behavior?</h2>
<p dir="auto">Simply to make my life easier and make the framework a bit more friendly to use.</p>