DOM 中没有选择器标签的 Angular2 组件

Question

Is there a way, with Angular2, to call a component by a selector without this selector appears in the DOM ?

My problem is I want to make a game in Angular2 with SVG rendering. I have a match component (my main match container), who calls a field component (who draws the field). My match component is a SVG element, and the field is a SVG Rect element.

This is my match component :

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

@Component({
    selector: 'match',
    template: `
        <svg:svg width="800" height="600" style="background-color:purple;">
            <field></field>
        </svg:svg>
    `
})
export class MatchComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }
}

And my field component :

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

@Component({
    selector: 'field',
    template: `
        <svg:rect width="600" height="300" fill="yellow"></svg:rect>
    `
})
export class TerrainComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }

}

When I launch my solution, it's working but the SVG is not like I want causes there is a element in the DOM who breaks the SVG :

<match>
        <svg height="600" style="background-color:purple;" width="800">
            <field>
        <rect fill="yellow" height="300" width="600"></rect>
    </field>
        </svg>
    </match>

Do you know if it's possible to use selectors whitout have them in the result DOM ? Or is there a better way to generate SVG with Angular 2 ?

---

EDIT : I found a solution using SVG groups, but I don't think it's the best solution, I would prefer not have the selector tag in the DOM at all.

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

@Component({
    selector: 'match',
    template: `
        <svg:svg width="800" height="600" style="background-color:purple;">
            <g field></g>
        </svg:svg>
    `
})
export class MatchComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }
}

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

@Component({
    selector: 'g[field]',
    template: `
        <svg:rect width="600" height="300" fill="yellow"></svg:rect>
    `
})
export class TerrainComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }

}

It's rendering this SVG, who works :

<match>
        <svg height="600" style="background-color:purple;" width="800">
            <g field="">
        <rect fill="yellow" height="300" width="600"></rect>
    </g>
        </svg>
    </match>

Answer 1

You can solve this by using CSS only, just set match as display: contents ,

    match {
        display: contents;
    }

As stated on display: contents documentation , this causes to appear as if the component were direct children of the element's parent.