Свойство CSS - начальная стоимость перезаписывает настройку извне ⇐ Html

[Anonymous]

Я работаю над угловым проектом.
У меня есть следующий класс компонентов: < /p>
export class ReservationTableComponent implements OnInit {
@Input({ required: true }) table!: Table;
@Input() set colMinWidth(value: string) {
this.renderer.setStyle(this.el.nativeElement, "--grid-column-min-width", value);
}
@Input() set colMaxWidth(value: string) {
this.renderer.setStyle(this.el.nativeElement, "--grid-column-max-width", value);
}
@Input() set rowGap(value: string) {
this.renderer.setStyle(this.el.nativeElement, "--grid-row-gap", value);
}
@Input() set colGap(value: string) {
this.renderer.setStyle(this.el.nativeElement, "--grid-col-gap", value);
}

@Input() selectedCells: Cell[] = [];
@Output() onSingleCellClicked: EventEmitter = new EventEmitter();

constructor(private el: ElementRef, private renderer: Renderer2) { }

ngOnInit(): void {
this.renderer.setStyle(this.el.nativeElement, "--grid-flow", this.table.direction === LineDirection.ROW ? "row" : "column");
this.renderer.setStyle(this.el.nativeElement, "--grid-columns", this.table.longestCol);
this.renderer.setStyle(this.el.nativeElement, "--grid-rows", this.table.longestRow);
}
< /code>
и CSS для компонента: < /p>
@property --grid-flow {
syntax: "row | column";
inherits: false;
initial-value: column;
}

@property --grid-columns {
syntax: "";
inherits: false;
}

@property --grid-rows {
syntax: "";
inherits: false;
}

@property --grid-column-max-width {
syntax: " | max-content | min-content | fit-content()";
inherits: false;
}

@property --grid-row-gap {
syntax: "";
inherits: false;
}

@property --grid-col-gap {
syntax: "";
inherits: false;
}

.table-container {
display: grid;
grid-template-columns: repeat(
var(--grid-columns, 1),
minmax(min-content, var(--grid-column-max-width, max-content))
);
grid-template-rows: repeat(var(--grid-rows), auto);
grid-auto-flow: var(--grid-flow, column);
box-sizing: border-box;
width: 100%;
row-gap: var(--grid-row-gap, 0px);
column-gap: var(--grid-col-gap, 0px);
align-items: stretch;
overflow-x: auto;
}
< /code>
Теперь, если я устанавливаю свойство --гид-потока внутри класса компонентов, его игнорируют или перезаритена по инитальному значению свойства.
Если я удалю значение inital: столбец из собственности, все работает нормально. Если набор IST inital-Value, изменения на входе не оказывают никакого эффекта.An @property rule is ignored because it contains an invalid property or is missing a required one:
initial-value
< /code>
Как решить эту ситуацию, и почему это происходит?
у кого-нибудь есть идея?
Спасибо: d < /p>

Подробнее здесь: https://stackoverflow.com/questions/789 ... om-outside