ли добавить переменную CSS встроенного стиля с помощьюRenderer2?

Я попробовал следующее, но это не работает.

import { Component, OnChanges, Output, ViewChild, Renderer2, ElementRef, ViewEncapsulation } from '@angular/core';

@Component({
})
export class CollapsibleComponent implements OnChanges {

  @ViewChild('collapsibleContent') collapsibleCo,ntent: ElementRef;

  constructor(
    private renderer: Renderer2
  ) { }

  ngOnChanges() {
    this.measureCollapsibleContents()
  }

  measureCollapsibleContents() {
    this.renderer.setStyle(this.collapsibleContent.nativeElement, '--expanded', this.collapsibleContent.nativeElement.firstElementChild.offsetHeight + 'px' )
  }

}

«--expanded» не является правильным свойством CSS, поэтому angular не добавит никакого стиля моему div.

Если я добавлю правильное свойство css, оно будет работать так, как показано ниже.

this.renderer.setStyle(this.collapsibleContent.nativeElement, 'top', this.collapsibleContent.nativeElement.firstElementChild.offsetHeight + 'px' )

вывод для моего div будет

<div style="top: 160px">...</div>

Я хотел бы добиться чего-то вроде ниже

<div style="--expanded: 160px">...</div>

Я также пытался[ngStyle] но это также не оказывает никакого значения, кроме атрибута стиля.

[ngStyle]="{'--expanded': expandedHeight }"

Выходы в

<div style>...</div>