Self-referential bindings to reduce clutter

[Enyium]

Consider this SlintPad demo (see comments):

component Foo {
    VerticalLayout {
        Rectangle {
            height: 20px;
            background: lightskyblue;
        }

        Text {
            text: "This content happens to expand the component beyond the outer minima.";
        }
    }
}

export component Demo {
    VerticalLayout {
        alignment: center;

        //HorizontalLayout {
        //VerticalLayout {
        //Rectangle {
            // Not better than the same in `Foo`.
            /*
            min-width: 200px;
            min-height: 20px;
            */

            // Having to use wrapper elements and these calculations
            // increases your UI code's verbosity and complexity to an
            // undesirable degree.
            /*
            min-width: max(200px, foo.min-width);
            min-height: max(20px, foo.min-height);
            */

            foo := Foo {
                // This rigorously overwrites the inner constraints,
                // leading to the component overdrawing other UI elements.
                /*
                */
                min-width: 200px;
                min-height: 20px;

                // A property that creates a binding loop with itself
                // could implicitly create another outer property of the
                // same name, or compile to unified property evaluation
                // code.
                //min-width: max(200px, self.min-width);

                // There could be a shorthand syntax for this, with its
                // meaning defined by the compiler per property.
                //&min-width: 200px;
            }
        //}
    }
}