How to use parent and child contexts (and should I)?

[davidjenkins]

I have the need to be able to conditionally disable portions of my app (mark certain HTML elements with a disabled class so I can control their look and behavior using CSS). Because I need to do this with complex components (elements with many descendant elements), and I don't want to keep passing props around, I decided to create a DisabledContext using the useContext API.

This was working very well for me until I ran into a situation where a parent component was disabled but a child component was not disabled.

Here is an example of the setup, when a parent might be disabled by one set of conditions, and a child might be disabled by a different set of conditions:

<DisabledContext disabled={() => conditionSet1}>
    <MyLargeSection>
        <MySmallSection1 />
        <DisabledContext disabled={() => conditionSet2}>
            <MySmallSection2 />
        </DisabledContext>
        <MySmallSection3 />
    </MyLargeSection>
</DisabledContext>

However, the result here is that my child/descendant component is allowed to be enabled even though a parent/ancestor component is disabled. This is not desirable is my case, and this is what I am looking to solve. In the example above, I would want MySection2 to be disabled if MyLargeSection is disabled, regardless of what conditionSet2 evaluates to. I also do not want MySmallSection2 to be concerned with conditionSet1.

This what I DO NOT WANT:

<DisabledContext disabled={() => conditionSet1}>
    <MyLargeSection>
        <MySmallSection1 />
        <DisabledContext disabled={() => conditionSet1 || conditionSet2} /* poor separation of concerns */>
            <MySmallSection2 />
        </DisabledContext>
        <MySmallSection3 />
    </MyLargeSection>
</DisabledContext>

Is there a way to achieve this?

[davidjenkins]

Ok. Actually this was pretty straightforward. I eventually realized there was a flaw in my previous attempts that was leading me to think this couldn't be achieved.

Here is a working example: https://playground.solidjs.com/anonymous/e25f4945-3478-4912-9c46-c37bc02fa432