Los códigos CSS no funcionan en componentes CSS pero funcionan en style.css en Angular

Tengo un archivo que usa la casilla de verificación anidada en angular. He creado un componente y puse el siguiente código en el cuerpo ngOnInit ()

    const mainUl = document.getElementById('siteDetail');
    mainUl.classList.add('ulClassStyle');
    const names = ['Laptops', 'TVs', 'Microphones'];
    const secondLi = document.createElement('li');
    secondLi.classList.add('liClassStyle');
    const secondSpan = document.createElement('span');
    secondSpan.classList.add('caret');
    const secondMaincheckbox = document.createElement('input');
    secondMaincheckbox.type = 'checkbox';
    secondMaincheckbox.id = 'secondOption';
    secondMaincheckbox.checked = true;
    const secondMainlbl = document.createElement('label');
    secondMainlbl.id = 'label';
    secondMainlbl.htmlFor = 'secondOption';
    secondMainlbl.classList.add('labelClassStyle');
    secondMainlbl.appendChild(document.createTextNode('Electronics'));
    secondSpan.appendChild(secondMainlbl);
    secondLi.appendChild(secondMaincheckbox);
    secondLi.appendChild(secondSpan);

    const secondSubUl = document.createElement('ul');
    secondSubUl.classList.add('ulClassStyle');

    for (let i = 0; i < names.length; i++) {
        const name = names[i];
        const secondSubLi = document.createElement('li');
        secondSubLi.classList.add('liClassStyle');
        const secondSubCheckbox = document.createElement('input');
        secondSubCheckbox.type = 'checkbox';
        secondSubCheckbox.name = 'name' + i;
        secondSubCheckbox.value = 'value';
        secondSubCheckbox.id = 'secondSubCheckboxid' + i;
        secondSubCheckbox.checked = true;
        secondSubCheckbox.onclick = function() { secondMyfunction(this); };
        secondSubCheckbox.classList.add('secondSubOption');
        secondSubLi.appendChild(secondSubCheckbox);
        secondSubLi.appendChild(document.createTextNode(name));
        secondSubUl.appendChild(secondSubLi);
        secondSubUl.classList.add('nested');
    }
    secondLi.appendChild(secondSubUl);
    mainUl.appendChild(secondLi);

    const secondCheckboxes = document.querySelectorAll('input.secondSubOption');
    const secondCheckall = document.getElementById('secondOption');
        secondCheckall.onclick = function() {
        for (let i = 0; i < secondCheckboxes.length; i++) {
            secondCheckboxes[i].checked = this.checked;
        }
    };

    function secondMyfunction(checkBox) {
        const secondCheckedCount = document.querySelectorAll('input.secondSubOption:checked').length;
        secondCheckall.checked = secondCheckedCount > 0;
        secondCheckall.indeterminate = secondCheckedCount > 0 && secondCheckedCount < secondCheckboxes.length;
    }

    const secondToggler = document.getElementsByClassName('caret');
    for (let i = 0; i < secondToggler.length; i++) {
        secondToggler[i].addEventListener('click', function() {
            this.parentElement.querySelector('.nested').classList.toggle('active');
            this.classList.toggle('caret-down');
        });
    }

Y luego escribí esto en el código CSS:

body {
    color: #555;
    font-size: 1.25em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  hr {
    margin: 50px 0;
  }

  .ulClassStyle
  {
      list-style: none;
  }

  .container {
    margin: 40px auto;
    max-width: 700px;
  }

  .liClassStyle {
    margin-top: 1em;
  }

  .labelClassStyle {
    font-weight: bold;
  }
  .nested {
    display: none;
  }

  .caret {
    cursor: pointer;
    user-select: none;
  }

  .caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 6px;
  }

  .caret-down::before {
    transform: rotate(90deg);  
  }

  .active {
    display: block;
  }

Si pongo este código CSS en el archivo css principal que: style.css, funciona bien sin ningún problema como se esperaba. Pero, si pongo el CSS para el componente, no funciona. ¿Alguna idea de por qué es así?