Ionic CSS classes assignment

Question

I’m styling my app. Familiar with the basic theming components, SASS etc... But one thing that stands out and it not making sense is why when I preview the source in a running a

Answer 1

ion-header is an angular directive (as is ion-toolbar). Directives can have an associated HTML template and javascript. The extra classes are added by the javascript that belongs to each directive. The code below demonstrates an angular directive where a class is added to the original element. If you inspect the results you can also see an extra div being added - that is the result of the directive's template being added to the DOM.

(function() {
  var app = angular.module("soDemo", []);
  app.directive("soDirective", SoDirective);

  function SoDirective() {
    var directive = {
      restrict: 'E',
      scope: {},
      link: link,
      template: '
My directive contents
'
    };
    return directive;
    ///////////////////
    function link(scope, element) {
      element.addClass('sample-class');
      
      console.log(element.html());
    }
  }
})();

.sample-class {
  display: block;
  border: 1px solid red;
}

.content {
  font-style: italic;
}