angularjs directive : how to encapsulate css?

One Method you can try is declaring and assigning the styles in JavaScript.

Declare a Style object.

styles = {
        background: 'green',
        color: 'black'
      };

Assign the object to a template using ng-style

<div ng-style="$ctrl.styles">
   My Component with local CSS
</div>

Here are some the following advantages using this method

1. Using Variables to drive themes.
2. Mixins through merging two Style Objects together (lodashes _.defaults)
3. Control over style overwriting.
4. Applying styles through logical conditions.
5. Having local Styles that can't effect other components.
6. You can place styles in angular services and inject them into only the component that need them.

Full Example

//Component

class myComponent {
    constructor( myCSSService ) {
        this.styles = {
            background: 'black',
            color: 'white'
        };
        this.myCSSService = myCSSService;
    }
}

myComponent.$inject = [ 'myCSSService' ];

angular.module( 'myModule', [] )
    .component( 'myComponent', {
        controller: myComponent,
        bindings: {},
        template: `
          <div ng-style="$ctrl.styles">
            My Component with local CSS
          </div>
          <div ng-style="$ctrl.myCSSService.styles">
            My Component with Injected CSS
          </div>
        `,
    } );

//Style Service

class myCSSService{
  constructor( ) {
      this.styles = {
        background: 'green',
        color: 'black'
      };
  }
}

angular.module( 'myCSSModule', [] )
    .service( 'myCSSService', myCSSService );

You can allow users to pass in class and/or style elements on the directive itself and you can have fine-grained control over how that class/style is applied to your template. The first step is to declare your directive with replace : true, which will then carry any class/style information to your underlying template. For instance:

app.directive("myDirective",function(){
  return {
    restrict:'AE',
    replace : true,
    template: '<div>This is my directive</div>'
  };
});

When you use this in HTML like this:

<my-directive class="red"></my-directive>

The resulting HTML will be:

<div class="red">This is my directive</div>

As you can see, the replace directive removes the directive tag, but preserves the attributes of the directive and applies them to the template. Therefore, in your directive, you don't technically have to do anything and your users can pass in style information to be automatically applied as necessary.

However, let's assume that your directive layout is more complicated:

app.directive("myDirective",function(){
  return {
    restrict:'AE',
    replace : true,
    template: '<div><div>My Title</div>My content</div>'
  };
});

Then you can explicitly indicate additional class/style references that your directive can optionally use and where the class would be applied. For example:

<my-directive class="red" class-title="blue"></my-directive>

And then, in your directive's compile or link function, you can set the class for internal template items if these are indicated:

app.directive("myDirective",function(){
  return {
    restrict:'AE',
    replace : true,
    template: '<div><div>Title</div>Content</div>',
    compile : function(elem,attr){
        if (attr.classTitle){
          var titleElem = angular.element(elem.children()[0]);
          titleElem.attr("class",attr.classTitle)
        }
    }
  };
});

Which would result in the following:

<div class="red" class-header="blue">
    <div class="blue">My Title</div>
    My Content
</div>

There's even more good things you can do with transclusion so that people can use their own content and styling for elements.