Eliminar los selectores de elemento HTML del host creados por el componente angular

Otro enfoque para eliminar el host del componente que uso.

Directiva remove-host

//remove the host of avatar to be rendered as svg
@Directive({
    selector: '[remove-host]'
})
class RemoveHost {
    constructor(private el: ElementRef) {
    }

    //wait for the component to render completely
    ngOnInit() {
        var nativeElement: HTMLElement = this.el.nativeElement,
            parentElement: HTMLElement = nativeElement.parentElement;
        // move all children out of the element
        while (nativeElement.firstChild) {
            parentElement.insertBefore(nativeElement.firstChild, nativeElement);
        }
        // remove the empty element(the host)
        parentElement.removeChild(nativeElement);
    }
}

Utilizando la presente directiva;
<avatar [name]="hero.name" remove-host></avatar>

En la directiva remove-host, todos los hijos de nativeElement se insertan antes del host y luego se elimina el elemento host.

Ejemplo Ejemplo Gist
Según el caso de uso, puede haber algunos problemas de rendimiento.

Hay otro enfoque que podemos obtener la plantilla de un componente del componente.
Primero, creamos el componente, cuya etiqueta esperamos eliminar del renderizado del navegador (no estamos tratando de eliminar la etiqueta aquí.)

@Component({
  selector: 'tl-no-tag',
  template: `
    <template #tmp>
      <p>{{value}}</p>
    </template>`,
  styleUrls: []
})
export class TlNoTagComponent {
  @ViewChild('tmp') tmp: any;
  value = 5;
}

Luego, en la plantilla de otro componente, escribimos:

<tl-no-tag #source></tl-no-tag> <!-- This line can be placed anywhere -->
<template [ngTemplateOutlet]="source.tmp"></template> <!-- This line will be placed where needed -->

Entonces, tenemos en el navegador algo como esto:

<tl-no-tag></tl-no-tag>
<p>5</p>

Así que hemos sacado <p>{{value}}</p> del componente Tlnotag. <tl-no-tag></tl-no-tag> seguirá allí, pero no bloqueará ningún css o svg-cosa.

Para citar la estrategia de actualización de Angular 1 a Angular 2 doc :

Las directivas que reemplazan su elemento host (replace: true directives en Angular 1) no son compatibles con Angular 2. En muchos casos, estas directivas se pueden actualizar a directivas de componentes regulares.

Hay casos en los que las directivas de componentes regulares no van a funcionar, en esos casos se pueden usar enfoques alternativos. Por ejemplo para svg ver: https://github.com/mhevery/ng2-svg

¿Qué pasa con algo como:

:host { display: contents; }

Poner eso en el archivo css (o scss) del componente host hará que la caja del componente no se procese.

N.B.: Ha funcionado para mí antes but pero obviamente me preocuparía por la compatibilidad del navegador, especialmente si se está desarrollando para soportar navegadores más antiguos. También estoy bastante seguro de que no está completamente fuera de la fase" experimental". Los documentos también indican que esto puede causar problemas de accesibilidad.