is it possible nest/inner dom-if where the second dom-if depends on value oberseved from the first dom-if block

Question

I read carefully these threads

Polymer 1 nested dom-if within dom-repeat not updating when data changes

how to dynamically append an element to dom-if in Polymer?

How to access content of dom-if inside a custom element?

that may have some relation with my question but I didn't manage find any clue if I can do what I want and how.

In my company, there are several flows, each one for each business flow and each step of the flow is a screen coded as a Polymer 1 web component. All them are warraped in a root Polymer component which defines the route.

A simple exemple would be:

my-root-component:

<dom-module id="my-root-component">
    <template>
        <first-obrigatiory-page which-route={aValueReturnedFromFirstComponent}></first-obrigatiory-page>
        <template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromFirstComponent)]]" restamp>
            <second-page which-sub-route={aValueReturnedFromSecondComponent}></second-page>
            <template is="dom-if" if="[[_isTrueFunction(aValueReturnedFromSecondComponentComponent)]]" restamp>
                <third-page ></third-page>
            </template>
        </template>
    </template>

        <script>
        Polymer({
            is: 'my-root-component',
            behaviors: [doesntMatterHere],
            properties: {

The first dom-if works as expected but the second seems not be taken in account and my third-page component is never showed.

I checked and the equivalent for _isTrueFunction(aValueReturnedFromSecondComponentComponent) is returning true.

Answer 1

Does aValueReturnedFromFirstComponent really return anything, because you should declare the attribute as which-route="{{aValueReturnedFromFirstComponent}}" instead of using simple { } .

Does the whichRoute (note the camelCase) property in the first-obrigatiory-page element have the notify: true property so the variable actually sends back the updated value?

---

I usually set observers on variables whenever dom-ifs don't update so I can see if they really change or not, and then set the variables myself through the console with document.querySelector('my-root-component').set('aValueReturnedFromFirstComponent', true) so I can see that the dom-if really updates.

A workaround could be to use events, but what you've done should work.