How to encapsulate parent/child relationship in webcomponents? - css-grid

Question

I'm trying to implement webcomponents with a parent/child relationship, and it seems like what I want to do is impossible. Please tell me I'm wrong!
I'm trying to build a grid layout. I have a component called grid and one called cell, a grid will contain multiple cell children.
I want to encapsulate the particular way I'm implementing the layout. I might use CSS grid, I might use a table, I might do all the rendering in SVG. I want the number of rows and columns to be properties of a grid and the specific row/column to be properties of a cell.
In this case I'm using CSS grid, and I'm generating my webcomponents using Svelte. I don't think Svelte is the problem, I think it's inherent to how webcomponents work.
So I want to be able to write:
<grid rows="3" cols="3">
<cell row="1" col="1" />
<cell row="1" col="2" />
...
</grid>
My resulting DOM looks like this in the inspector:
<grid cols="3" rows="3">
#shadow-root /* style includes display:grid, columns and rows settings */
<cell col="1" row="1">
#shadow-root /* style includes grid-column:1; grid-row:1; */
<div>...</div>
</cell>
<cell col="1" row="2">
#shadow-root /* style includes grid-column:1; grid-row:2; */
<div>...</div>
</cell>
...
</grid>
The grid component has all the CSS styles to display a 3x3 grid. And it does show a grid, but the cells aren't in the correct order.
The problem is that the grid-column and grid-row CSS attributes for the cells are set in their shadow-roots and apply to their divs. The immediate children of the HTML element that has display: grid; as a style are the cells, and they don't have grid-column or grid-row styles. The div under each of the cell's shadow-root has those styles. So those styles are ignored and the cells get laid out in the order they appear in the DOM.
I can get it to lay out correctly by rendering each cell with its own style setting the row/column, as in:
<grid rows="3" cols="3">
<cell style="grid-column:1; grid-row:1" />
...
</grid>
But now I have a leaky abstraction, the user of the grid and cell webcomponents has to know that grid uses CSS grid to do its layout, and has to apply CSS grid styles to the cells to place them correctly. I want to encapsulate this parent/child implementation detail entirely within the webcomponents.
Unless there's a way, in a webcomponent, to apply a CSS style to the component itself, above the shadow-root, it seems like what I'm trying to do is impossible. Is this an inherent limitation of webcomponents?
Thanks for your help!

Answer 1

To answer my own question: yes, you can access the webcomponent from within, penetrating the shadowRoot upwards.
In CSS, you can access the component with the :host selector. In my case, I use CSS vars:
:host {
grid-column: var(--cell-col);
grid-row: var(--cell-row);
}
I still need to set the values of the variables in the DOM, and setting them in the top-level element of the component (the div) won't work. In Svelte, I can use bind:this to bind the div element to a variable (topEl). Then I add an onMount handler that navigates up from the topEl to its host and sets the CSS variables from the Svelte component variables:
onMount(() => {
topEl.parentNode.host.style.cssText += `--cell-col:${col} --cell-row:${row}`
})