title: Signaling to users of component that binding a property is not safe
body: <p>I found the following QML component <a href="http://doc.qt.io/qt-5/qml-qtquick-state.html" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code>import QtQuick 2.0
  
  Rectangle {
      id: myRect
      width: 100; height: 100
      color: "black"
  
      MouseArea {
          id: mouseArea
          anchors.fill: parent
          onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
      }
  
      states: [
          State {
              name: "clicked"
              PropertyChanges { target: myRect; color: "red" }
          }
      ]
  }
  </code></pre>
  
  <p>Let's call it "MyRect.qml". Since MyRect overrides the <code>state</code> property, binding it to a property won't work:</p>
  
  <pre><code>Item {
      id: root
  
      MyRect {
          id: inner
  
          state: root.state // not safe
      }
  }
  </code></pre>
  
  <p>Assigning it will however work:</p>
  
  <pre><code>Item {
      id: root
  
      onStateChanged: inner.state = root.state // safe
  
      MyRect {
          id: inner
      }
  }
  </code></pre>
  
  <p>On the other hand both binding and assigning would be safe for the property <code>width</code> of <code>MyRect.qml</code>.</p>
  
  <p>How can a user of <code>MyRect.qml</code> know which properties are safe to bind and which are not without having to examine the source code? </p>