Why behavior of angularjs tag is different from normal tag?

Question

css

If create -

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

and apply style -

*
    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

Then both .main-container and .some-form have the same sizes and are non-zero (expected). But if you do this -

<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

Then the size of the registration-form tag is zero... Here is the derivative -

import * as angular from 'angular';

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

Answer 1

in html you get a matryoshka of elements:

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

And the rendering of the `some-form` element and its sizing is up to the browser.
You either need to specify the replace directive parameter: true to completely replace the element with the template.
Or use an attribute directive.
Well, you also have stupidly nothing to apply css registration-form to - such an element is not formed in html.