Как реализовать вложенные компоненты

Пытаюсь разобраться как реализовать вложенность компонентов примерно такой структуры: Первый компонент:

    <div id='mainComponent'>
    </div>

И второй компонент:

     <div id='nestedComponent'>
    </div>

Хотелось бы использовать структуру типа

    <mainComponent>
          <nestedComponent>          
          </nestedComponent>         
    </mainComponent>

Но насколько я понимаю такая структура невозможна. Так ли это? Как сделать так чтобы в родительском компоненте содержались дочерние? Правильно ли я понимаю, что это можно сделать только внутри родительского компонента (внутри div родительского компонента)? Хотел посмотреть где нибудь исходные коды реализации div элемента html , но пока не нашел