[Layout]: unwanted css-variable inheritance

[rachelbt]

Describe the bug When using a custom css variable for setting costume column grid layout, the variable effects the nested vwc-layout as well

To Reproduce Steps to reproduce the behavior:

1. use vwc-layout and set a css-custom property using: --layout-grid-template-columns (say: --layout-grid-template-columns: 100px 400px;)
2. nest another vwc-layout inside the vwc-layout with column-basis="block" (the bug happens even without it - but with block - you would expect the elements to pile up with 100% width)
3. See error

Expected behavior that --layout-grid-template-columns will not affect nested vwc-layout

Screenshots

Additional context Happens also in vivid-3

[yinonov]

experienced similar issue and added a section addressing it in https://modern-web.dev/guides/going-buildless/css/#inherited-values until registration of custom properties is supported, we can workaround it in authors scope by unsetting the --layout-grid-template-columns.

<vwc-layout style="--layout-grid-template-columns: {whatever...}">
    <vwc-layout style="--layout-grid-template-columns: unset;">
        ...

[yinonov]

closing as there's no action item planned until browsers supports custom properties. please reopen if see fit

[rachelbt]

@yinonov - I'm wondering if we need to add it to the layout documentation... What do you think?

[yinonov]

@yinonov - I'm wondering if we need to add it to the layout documentation... What do you think?

yes addressing the problem and a workaround can be a feasible alternative to resolve this.

this is my authoring so we can plainly copy & paste it

Then, due to lack of current support, add the option to unset variable on nested child