CSS Verkapselung mit kantigem 4 und Materialise

Question

an example Hier ist die reguläre Materialise select und Angular Materialise Komponente führt:

@Component({ 
    selector: 'my-app', 
    styles: [` 
.select-wrapper { 
    background-color: red; 
} 
    `], 
    template: ` 
    <div class="row"> 
     <div class="col s6"> 
     <select materialize="material_select"> 
      <option>...</option> 
     </select> 
     </div> 

     <div class="col s6"> 
     <select class="non-angular-materialize"> 
      <option>...</option> 
     </select> 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    ngOnInit() { 
    $('.non-angular-materialize').material_select(); 
    } 
} 

Styles werden nicht angewendet.

Obwohl same example Arbeiten mit /deep/, trotzt diese den Zweck der Komponenten:

:host /deep/ .select-wrapper { 
    background-color: red; 
} 

Warum passiert das das? Ist es möglich, die CSS-Kapselung beizubehalten und /deep/ zu vermeiden, wenn die Elemente der Komponentenvorlage formatiert werden? Ist dieses Problem spezifisch für Materialise?

Answer 1

Die Verwendung von/deep /, >>> und :: ng-deep sind mit emulierten View Encapsulation. Emuliert ist die Standardeinstellung und am häufigsten verwendete Ansicht encapsulation.Angular Unterstützung 3 Arten der Ansicht Kapselung 1.Native: Ansicht Kapselung verwendet Browser native Schatten DOM. 2.Emulated (Standard): Emulieren Sie das Verhalten von Shadow-DOM, indem Sie CSS-Klassen umbenennen und das CSS effektiv auf die Ansicht der Komponente beschränken. 3.None: Angular sieht keine Kapselung. Angular fügt das CSS den globalen Stilen hinzu. Ähnlich wie beim Einfügen von Komponentenstilen in HTML können Sie die Ansichtseinkapselung festlegen, indem Sie Ihrer Komponente eine Kapselung hinzufügen. zB: -

@Component({ 
    selector: 'hero-team', 
    template: ``, 
    encapsulation: ViewEncapsulation.None 

}) 

Answer 2

ViewEncapsulation.Emulated wird standardmäßig verwendet.

Um emulierte css Einkapselung eckig fügt einige Attribute zu allen Elementen innerhalb der Vorlage.

Zum Beispiel die folgende Vorlage

<div class="col s6"> 
    <select materialize="material_select"> 
    <option>...</option> 
    </select> 
</div> 

becames

<div _ngcontent-c0="" class="col s6"> 
    <select _ngcontent-c0="" materialize="material_select"> 
    <option _ngcontent-c0="">...</option> 
    </select> 
</div> 

wo c0 eindeutige ID Ihrer Komponente ist.

Und neben dem Überschreiben Vorlage Angular auch spezifische css-Selektoren von styles|styleUrls Inhalt erstellen.

So

.select-wrapper { 
    background-color: red; 
} 

becames

.select-wrapper[_ngcontent-c0] { 
    background-color: red; 
} 

Schließlich wird die CSS nicht angewendet wird, weil Ihre dynamisch HTML hinzugefügt (nach Plugin ausgeführt wird) nicht über die Attribute _ngcontent-c0 angewendet

die Verwendung von "shadow piercing" CSS-Kombinatoren oder mit Stilen außerhalb von styles|styleUrls Eigenschaften sollte es umgehen.