title: How to define a "template" with child placeholders in QML?
body: <p>I really like QML. I like how I can define components (comparable to classes) and their properties, and instantiate them from somewhere else (comparable to objects).</p>
  
  <p>I can define, let's say, a button, having some look and feel, and a label text on it. This could be done, for example, using this component definition (<code>Button.qml</code>):</p>
  
  <pre><code>Item {
      id: button
      property string label
  
      anchors.fill: parent
  
      Rectangle {
          anchors.fill: parent
          radius: 10
          color: "gray"
  
          Text {
              anchors.centerIn: parent
              font.pixelSize: 20
              text: button.label
              color: "white"
          }
      }
  }
  </code></pre>
  
  <p>and instanciated in this main file (<code>main.qml</code>):</p>
  
  <pre><code>Rectangle {
      width: 300
      height: 200
  
      Button {
          anchors.centerIn: parent
          anchors.margins: 50
          label: "Hello button!"
      }
  }
  </code></pre>
  
  <p>But I see the following restriction: I can only define a button template <em>with some properties</em>, not with some <em>placeholder</em>. All children defined in the instance will be direct children, at least per default, and I want to change this behavior.</p>
  
  <p>Let's say I want to place an item (let's say an image, but I don't want to tell the definition of <code>Button</code> that it will be an image) in the button. I imagine something like this:</p>
  
  <pre><code>Item {
      id: button
      property Item contents   &lt;-- the client can set the placeholder content here
  
      anchors.fill: parent
  
      Rectangle {
          anchors.fill: parent
          radius: 10
          color: "gray"
  
          Item {
              id: placeholder     &lt;-- where the placeholder should be inserted
          }
      }
  
      Component.onCompleted: {
          // move the contents into the placeholder...
      }
  }
  </code></pre>
  
  <p>How can I achieve this? I don't know if using <code>Component.onCompleted</code> is the correct way. Note that, however, that in my case the contents will never change afterwards (at least in my current design of the application...).</p>
  
  <p>Also, I want anchoring to work within the placeholder. For example, if I define the contents to be a Text element, being centered in its parent (which will first be the template itself). Then my code moves this Text instance into the placeholder and the parent anchors should then be those of the placeholder item, not the template item.</p>