Hiding JSON-formatted data in the DOM with CSP enabled

[dedlfix]

Tach!

Angular 2 hat ng-show/hide zugunsten von hidden gestrichen und es klappt damit meist nicht wie gewünscht, weil sich das durch einfaches display:nicht-none; wirkungslos machen lässt und man dafür zusätzliche Verrenkungen im CSS benötigt.

[hidden]
{
  display: initial;
  opacity: 0.1;
}

Was ist daran „Verrenkung“? (CodePen)

Die Verrenkung fängt dann an, wenn eine Regel mit Klassenselektor das display (und in deinem Fall noch das opacity) anders setzt. Der überschreibt schon mal ganz locker den Attributselektor. Dann fängt der K(r)ampf mit dem Finden eines spezifischeren Selektors an. Besonders dann, wenn man nicht nur selbst geschriebenes CSS im Projekt hat. (Und opacity ist nicht die Lösung, denn damit bleibt der Platz belegt.)

dedlfix.