Have I missed something with CSS or is DomSanitizer and Renderer2 causing my CSS to not flow or inherit as it should?

Question

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 class="prev-date">${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 class="today" value="${i}">${i}</div>`;
      } else {
          this.htmlContent += `<div value="${i}">${i}</div>`;
      }
  } 

    for(let j = 1; j<=this.nextDays; j++){
    this.htmlContent += `<div class="next-date" 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 class="days" [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.

Answer 1

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;
}