Why does my angular component ignore my css file?

Question

I have an angular component with this file structure:

.
|____custom-d3-tree.component.css
|____custom-d3-tree.component.spec.ts
|____custom-d3-tree.component.ts
|____custom-d3-tree.module.ts
|____custom-d3-tree.service.spec.ts
|____custom-d3-tree.service.ts
|____tree.dendo.model.ts

The file tree.denco.model.ts defines:

export class TreeModel {

It implements a d3 tree. The nodes in the tree have foreignObject 's defined in them that contain an order list. Here is the code that adds to foreignObject to the rectangular nodes:

    nodeEnter.append('foreignObject')
      .attr('x', function(d) { if(d.data.component_type) { return 5; } return 0; })
      .attr('y', function(d) { if(d.data.component_type) { return 5; } return 0; })
      .attr('width', this.rect_width)
      .attr('height', this.rect_height)
      .style('overflow', 'auto')
      .append('xhtml')
      .style("font", "10px 'Helvetica Neue'")
      .html(function (d) {
        if( d.data.component_type ) {
          return '<div style="width: ' + (d.width - 10) + 'px; height: '
            + (d.height - 10 ) + 'px;" class="node-text wordwrap">'
            + '<b>' +  d.data.name + '</b><br><br></div>';
        } else {
          let scrollList = '<nav><ul>';
          let startDate = "2019-04-05";
          for( let i=0; i < d.data.components.length; i++ ) {
            let url = environment.frontEndUrl + '/component-mapping-dynamic?node='
              + d.data.name + '&filter_key=' + d.data.components[i].filter_key;
            // scrollList += '<li style="list-style: ' + 'none' + '"><a href="'+ url + '">' + d.data.components[i].name + '</a></li>';
            scrollList += '<li><a href="'+ url + '">' + d.data.components[i].name + '</a></li>';
          }
          scrollList += '</ul></nav>';
          return '<div>' +  scrollList + '</div>';
        }
    });

I have a css file, custom-d3-tree.component.css that contains this:

.d3-chart {
  width: 100%;
  min-height:600px;
}

.wordwrap {
  white-space: pre-wrap; /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap; /* Opera <7 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* IE */
}

div:hover {
  overflow-y: scroll;
}

ul {
  list-style-type: circle;
}
nav ul{height:1000px; width:18%; list-style-type: none;}

div {
  height: 100px;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: scroll;
}

/* nav ul{height:100px; width:18%; list-style-type: none;} */
/* nav ul{overflow:hidden; overflow-y:scroll;} */

Here is what the tree looks like when my code runs:

As you can see most of the if not all the css elements in my file are ignored and I don't understand why.

Update: here is my custom-d3-tree.component.ts file:

import { Component, OnInit, OnChanges, ViewChild, ElementRef,
   Input, Output, EventEmitter} from '@angular/core';

import { AngularD3TreeLibService } from './custom-d3-tree.service';
@Component({
  selector: 'custom-angular-d3-tree-lib',
  template: `
    <div class="d3-chart" #chart></div>
  `,
  styleUrls: ['./custom-d3-tree.component.css']
})
export class AngularD3TreeLibComponent implements OnInit, OnChanges {
  @ViewChild('chart') private chartContainer: ElementRef;
  @Input() treeData: any = [];
  @Output() onNodeChanged: EventEmitter<any>= new EventEmitter();
  @Output() onNodeSelected: EventEmitter<any>= new EventEmitter();

  constructor( private treeService: AngularD3TreeLibService ) {
    treeService.setNodeChangedListener((node)=>{
      this.onNodeChanged.emit(node);
    });
    treeService.setNodeSelectedListener((node)=>{
      this.onNodeSelected.emit(node);
    });
  }

  ngOnInit() {}
  ngOnChanges(changes: any) {
    this.seedTree();
  }

  seedTree(){
    if(!!this.treeData){
      this.treeService.createChart(this.chartContainer, this.treeData);
      this.treeService.update();
    }
  }
}

Answer 1

According to https://angular.io/guide/component-styles by default

The styles specified in @Component metadata apply only within the template of that component.

So that you can style only this element

<div class="d3-chart" #chart></div>

with the following selectors div or .d3.chart .

If you want to spread visibility of your styles to all child elements of a component then you should consider using combination of :host and ::ng-deep selectors, ie:

:host ::ng-deep .wordwrap {
  ...
}

:host ::ng-deep div:hover {
  ..
}

I would avoid using div selector but rather would give them a class.

There is also a great overview about how we can style Angular components:

• Angular :host, :host-context, ::ng-deep - Angular View Encapsulation