Escopo de seus estilos em angular com ViewEncapsulation

[marcialwushu]

Escopo de seus estilos em angular com ViewEncapsulation

Uma estrutura de aplicativos como o Angular permite criar aplicativos da Web que são feitos de blocos de construção (componentes) reutilizáveis ​​e independentes. Para que isso funcione, no entanto, precisamos de uma maneira de as regras CSS se aplicarem apenas em um determinado componente.

Mencionamos resumidamente o encapsulamento de visualização em nosso post sobre a aplicação de estilos entre componentes , mas vamos agora explicar as coisas um pouco mais.

Esta postagem se aplica a aplicativos do Angular 2+.

Por exemplo, digamos que temos um modelo de componente que se parece com isso:

app.component.html

<h1>
  Hello, I am a {{ animal }}
</h1>

E queremos modelar nosso elemento h1 para este componente da seguinte forma:

app.component.css

h1 {
  background: pink;
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem 0;
}

Sem qualquer encapsulamento de visualização, qualquer outro elemento h1 em seu aplicativo herdaria esses estilos.

---

O modo de encapsulamento de visualização padrão no Angular, por enquanto, é Emulado . Você pode especificar um modo diferente em seus componentes como este:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  animal = '🐰';
}

---

Vamos repassar os 3 valores disponíveis para ViewEncapsulation:

ViewEncapsultion.Native

Esse é o modo de encapsulamento que seria ideal e usa o Shadow DOM para estilos de escopo somente para esse componente específico.

Veja como o encapsulamento com DOM de sombra se parece no Chrome DevTools:

O único problema agora, no entanto, é que o suporte para o Shadow DOM ainda está faltando:

No momento, é provável que você queira usar o Native ViewEncapsulation somente se estiver segmentando um conjunto restrito de navegadores modernos ou estiver trabalhando em um aplicativo que não verá a luz do dia por algum tempo.

ViewEncapsultion.Emulated (o padrão)

Além de poder usar o encapsulamento de visualização nativa na produção, o modo Emulado é o que nos permite alcançar o mesmo efeito.

Com este modo, o Angular adiciona atributos aos nossos modelos de componentes da seguinte forma:

<h1 _ngcontent-c0>
  Hello, I am a 🐰
</h1>

E os estilos, que podem ser encontrados na header do documento, são abrangidos por esses atributos:

h1[_ngcontent-c0] {
  background: pink;
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
  'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem 0;
}

ViewEncapsultion.None

Isso remove qualquer encapsulamento e todas as regras CSS terão um efeito global. Esse modo é comparável ao desenvolvimento de aplicativos da web antes de separar nossos aplicativos em componentes reutilizáveis.

Com ViewEncapsultion.None , adicionar regras ao arquivo CSS vinculado a um componente é o equivalente a adicionar as mesmas regras a um styles.css arquivo global .

Você provavelmente desejará usar None somente ao trabalhar em aplicativos menores ou em componentes que devem compartilhar estilos globais.

Aprendendo mais

Aqui estão dois grandes posts que vão ainda mais a fundo sobre o tema:

• Visualizar Encapsulamento em Angular por thoughtram
• Emulado ou nativo do Shadow DOM em Angular 2 com ViewEncapsulation por Todd Motto

---

Published: June 29, 2017 Artigo Original