I have been setting up a grid layout with some divs, following this structure:
CSS
.grid {
width: 300px;
display: grid;
grid-template-columns: 50% 50%;
}
HTML
<div class="grid">
<div>First cell</div>
<div>Second cell</div>
<div>Third cell</div>
<div>Fourth cell</div>
</div>
https://jsfiddle.net/m47ody94/5/
Everything was going smoothly. However, I am now working with Angular and I want to encapsulate each pair of cells within a component. This results in a different DOM structure:
<div class="grid">
<component>
<div>First cell</div>
<div>Second cell</div>
</component>
<component>
<div>Third cell</div>
<div>Fourth cell</div>
</component>
</div>
https://jsfiddle.net/m47ody94/6/
The layout of cells on the screen has changed, as the inner divs are no longer part of the grid. Instead, the first component occupies one cell and its divs are rendered as block elements within that cell, and the same goes for the second component.
Ordinarily, non-standard tags like component have no impact on the browser's renderer, unless specified through CSS. Why is that happening in this case? Is there a way to keep them in for my Angular app, but instruct the renderer to treat each div as one cell of the grid, similar to the initial setup?