Unable to Override CSS Variables Due to Recursive WC Usage

It looks like your component uses itself recursively to display nesting which is cool and a neat way to handle the deep structure of JSON

There's however an unfortunate side effect that it is difficult to override the css variables for the nested web components as each sets its own :host css variables.

You can test this with a toy example where you have on the page

  pretty-json {
    --key-color: red;
    --arrow-color: red;
    --brace-color: red;
    --bracket-color: red;
    --string-color: red;
    --number-color: red;
    --null-color: red;
    --boolean-color: red;
    --comma-color: red;
    --ellipsis-color: red;
  }

Then include a JSON structure that has at least one level of nesting.

You will see that the values are correctly overridden in the parent web component but each nested web component will override the variables set on the outer component.

I'm guessing the solve would be to override redefining the css variables in the shadow DOM of the nested components, you could also use part syntax to expose the underlying css for direct styling.

mohsen1 / pretty-json

Unable to Override CSS Variables Due to Recursive WC Usage #17