How to write custom components in Ionic 2/3 without losing prepared css?

Question

When I write my own custom component as follows:

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

@Component({
  selector: 'deletableItem',
  template: `
    <ion-checkbox item-right></ion-checkbox>
  `
})
export class DeletableItem {
  constructor() {}
}

And use it in some html view:

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bill of bills" (click)="openEdit(bill)">
      <ion-label text-left>{{bill.name}}</ion-label>
      <deletableItem></deletableItem>
    </ion-item>
  </ion-list>
</ion-content>

A look at this is worse than just putting it in the parent component view right away:

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let bill of bills" (click)="openEdit(bill)">
      <ion-label text-left>{{bill.name}}</ion-label>
      <ion-checkbox item-right></ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>

All this because angular wrap this component HTML in an html tag. Thus, we lose strong ionic constituents (prepared by css). Please do not offer attributive assignment of components, for example:

<ion-checkbox item-right deletableItem></ion-checkbox>

Because it is just a simple example.

What is the best way to write custom components with ionic components inside without losing prepared css?

Answer 1

, Ionic SASS . <deletableItem></deletableItem>, , , Sass.

<ion-checkbox>.

SASS deleteableItem.

, - Ionic / SASS.

, CSS, .

Chrome - Ionic.