Почему поведение angularjs тега отличается от обычного тега?

Question

[vasIvas]

Если создать -

<div class="main-container">
	<div class="some-form">
		<div></div>
	</div>
</div>

и применить стиль -

*
    margin: 0
    padding: 0

html, body
	height: 100%
    background: #202020


.main-container
	width: 100%
	height: 100%
	min-height: 100%


.registration-form
    width: 100%
    height: 100%

    background: #202020

То и у .main-container и у .some-form размеры одинаковые и отличные от нуля (ожидаемые). Но если сделать так -

<div class="main-container">
	<some-form>
	</some-form>
</div>

*
    margin: 0
    padding: 0

html, body
	height: 100%
    background: #202020


.main-container
	width: 100%
	height: 100%
	min-height: 100%


registration-form
    width: 100%
    height: 100%

    background: #202020

То у тега registration-form размер нулевой... Вот дериктива -

import * as angular from 'angular';

export default function registrationFormDirective(): any {
    return {
        strict: 'AE',
        template: '<div></div>',
        link: ($scope, element, attributes)=>{
        	
        }
    };
}

Answer 1

[Максим Васильев]

у вас в html получается матрёшка из элементов:

<div class="main-container">
  <some-form>
   <div></div>
  </some-form>
</div>

И рендеринг элемента `some-form` и его рамеров передаётся на совесть браузера.

Вам надо либо указать параметр директивы replace: true, чтобы полностью заменять элемент на шаблон.
Либо использовать атрибутную директиву.

Ну а ещё у вас тупо не к чему применять css registration-form - такого элемента в html не образуется.

Answer 2

[Сергей Протько]

по умолчанию все кастомные элементы являются инлайн элементами, если что.