css property - initial-value overwrites setting from outside

I'm working on a angular-project. I have the following component class:

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<Cell> = 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);
}


And the css for the component:

@property --grid-flow {
syntax: "row | column";
inherits: false;
initial-value: column;
}

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

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

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

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

@property --grid-col-gap {
syntax: "<length>";
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;
}


Now if I set the --grid-flow property inside the component class it is ignored, or overwriten by the inital-value of the property. If I remove the inital-value: column from the property, everything works fine. If the inital-value ist set, changes on the input doesn't take any effect. If I don't set a inital-value I got some error:

An @property rule is ignored because it contains an invalid property or is missing a required one:
initial-value


How to solve this situation, and why does this happen? Does anyone have an idea? Thanks :-D

Continue reading...