angular - htmlが子コンポーネントにある場合、ng-contentセレクターが読み取られない

Question

次のコンポーネントがあるとします (「MyModalComponent」と呼びましょう)。

MyModalComponent

<div class="my-modal">
  <div class="my-modal-header">
    <ng-content select="modal-title></ng-content>
  </div>
  <div class="my-modal-body">
    <ng-content></ng-content>
  </div>
</div>

このように使用すると、完全に機能します。

<my-modal>
  <h1 modal-title>I am a modal</h1>
  <div>
    And this is my body!
  </div>
</my-modal>

• タイトルは<div class="my-modal-header">div内でレンダリングされます
• 残りのコンテンツは<div class="my-modal-body">div に入ります

ただし、html を別のコンポーネントにラップすると、セレクター プロジェクションが機能しなくなります。

MyModalContentComponent

<h1 modal-title>I am a modal</h1>
<div>
  And this is my body!
</div>

<my-modal>
  <my-modal-content></my-modal-content>
</my-modal>

これで、すべての html コードが MyModalComponent の「フォールバック」<ng-content></ng-content>スロット (つまり、<div class="my-modal-body">div 内) にレンダリングされます。
この場合、セレクターはもう機能していないようです。

これは「設計による」ものですか、それとも、HTML マークアップを MyModalComponent に直接配置した場合と同じように動作し続けることを確認するにはどうすればよいですか?