Have I missed something with CSS or is DomSanitizer and Renderer2 causing my CSS to not flow or inhe-CodePudding

Background story. I am creating my own Calendar and Angular has safety features built in for the use of innerHTML. I won't lie, I am new so my code is not pretty, sorry. I was following some tutorials and adding things as I went. This is the function building divs into my html using innerHTML. This function is set to a variable right now, which is called in the ngAfterViewInit().

divAndClassGenerator(){
    this.htmlContent = '';
    
    for(let x = this.firstDayIndex; x>0; x--){
      this.htmlContent  = `<div >${this.prevLastDay - x   1}</div>`
  }
  
    
    for(let i =1; i<=this.lastDay; i  ){
      if(i === new Date().getDate() && this.date.getMonth() === new Date().getMonth()){
           this.htmlContent  = `<div  value="${i}">${i}</div>`;
      } else {
          this.htmlContent  = `<div value="${i}">${i}</div>`;
      }
  } 

    for(let j = 1; j<=this.nextDays; j  ){
    this.htmlContent  = `<div  value="${j}">${j}</div>`
  } 
    let safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.htmlContent);
    let myElement = this.renderer.selectRootElement('.days');
    this.renderer.setProperty(myElement, 'innerHTML', safeHtml);
    
    return safeHtml;

  }

This is my html that innerHTML is being used to access. I feel like I may be going about this in a unnecessary way with the 2 variables.

<div  [innerHTML] = "safeInnerHtml">

Finally this is part of the CSS that I want accessed my the divs being created.

.days {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem;
    
}

.days div{
    font-size: 1.4rem;
    margin: 0.3rem;
    width: calc(30rem/7);
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.5);
    transition: background-color 0.2s;
}

.days div:hover:not(.today){
    background-color: #262626;
    border: 0.2rem solid #777;
    cursor: pointer;
}

.prev-date ,
.next-date  {
    opacity: 0.5;
}

.today{
    background-color: #7e1616;
}

The current build of my page renders the calendar dates but does not use the CSS I have here. It is inheriting bits and pieces from the CSS that occurs before these. The previous CSS are linked to the parent container of the div .days from above. I am not sure why the CSS is not inheriting or flowing like I expect it to.

I have tried so many things the last 2 days I barely remember, most of them involved moving variables, blocks of code, rewriting the DomSanitizer and Renderer2 statements.

CodePudding user response：

The problem here is the css you wrote in your component is only encapsulated on this component content , if you want to apply your css to the content you provide with innerHTML , you have to use ng-deep

:host ::ng-deep .days div {
  font-style: italic;
}