Ionic 3: Custom angular component not working as expected. Bug?

Basically there is a wrapping problen in which dom element of custom component does not cover their children.

There is a single page which uses test component.

single.html

<test></test>

single.ts

import { Component } from '@angular/core';
import { IonicPage,} from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-single',
  templateUrl: 'single.html',
})
export class SinglePage {}

single.scss

page-single {}

Now this test component

test.html

<div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
  <div>Hello</div>
</div>

test.ts

import { Component } from '@angular/core';

@Component({
  selector: 'test',
  templateUrl: 'test.html'
})
export class TestComponent {}

test.scss

test {}

1. Why it looks test and inside div elements are siblings to test and are not like parent child?

2. Changing background-color:red on test (in chrome inspect mode) does nothing visually, meaning all children div color remains same.

Full test element is not highlighted. Inside div elements are fine. test component shows 411 x 68 but looks like it is 0x0. Computed styles show dimension as auto x auto. Every component in my app is behaving like this. Component do not cover their child and looks like their sibling.

This behaviour was also present in Ionic example conference app. In Angular example app components works as expected.