<p dir="auto">I am using Angular 2.0.0-beta.12 &amp; D3, i am injecting D3 barchart after viewInit, and inject css in component by adding attribute "styles", element injected and display on browser, but css is not apply on dynamic elements which are created by D3, found an issue, after component initialization css embed in document head tag, and all css selectors changed to .myClass[_ngcontent-[variable]], and this variable attribute attached to all elements of that component, but not with dynamically appended components.</p>
<p dir="auto">here are my code</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
    selector: 'app',
        template: `
            &lt;h1&gt;D3.js Integrated if background is yellow&lt;/h1&gt;

            style apply on this static element but not dynamic element
            &lt;svg&gt;&lt;rect class=&quot;bar&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/rect&gt;&lt;/svg&gt;
        `,
        styles : [`.bar { fill: steelblue; } .bar:hover { fill: brown; }
` ]
})
class App { 

    constructor(public elementRef: ElementRef){
    } 

    ngOnInit(){
        var componentContainer = d3.select(this.elementRef.nativeElement);

        componentContainer.select(&quot;h1&quot;).style(&quot;background-color&quot;, &quot;yellow&quot;);

//Dynamic Element Injeciton
        componentContainer.append(&quot;svg&quot;)
            .append(&quot;rect&quot;)
            .attr(&quot;class&quot;, &quot;bar&quot;)
            .attr(&quot;width&quot;, 200)
            .attr(&quot;height&quot;, 200);
    }

}"><pre class="notranslate"><code class="notranslate">@Component({
    selector: 'app',
        template: `
            &lt;h1&gt;D3.js Integrated if background is yellow&lt;/h1&gt;

            style apply on this static element but not dynamic element
            &lt;svg&gt;&lt;rect class="bar" width="200" height="200"&gt;&lt;/rect&gt;&lt;/svg&gt;
        `,
        styles : [`.bar { fill: steelblue; } .bar:hover { fill: brown; }
` ]
})
class App { 

    constructor(public elementRef: ElementRef){
    } 

    ngOnInit(){
        var componentContainer = d3.select(this.elementRef.nativeElement);

        componentContainer.select("h1").style("background-color", "yellow");

//Dynamic Element Injeciton
        componentContainer.append("svg")
            .append("rect")
            .attr("class", "bar")
            .attr("width", 200)
            .attr("height", 200);
    }

}
</code></pre></div>
<p dir="auto">currently there are several layers in our build system that log and rethrow exceptions, we need to unify these and suppress errors (or stack traces for errors) so that the output is easy to understand and doesn't contain duplicate messages or useless stack traces.</p>
<p dir="auto">Sources of exceptions/exception logging:</p>
<ul dir="auto">
<li>broccoli plugins</li>
<li>angular_builder.ts</li>
<li>gulp's runSequence</li>
<li>gulp's tasks</li>
</ul>
<p dir="auto">common scenarios to tackle:</p>
<p dir="auto">interactive/watch mode:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> typescript compilation error</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> traceur compilation error</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> karma browser test failure/error (<code class="notranslate">gulp test.unit.js</code>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> jasmine test failure/error (<code class="notranslate">gulp test.unit.cjs</code>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ts2dart errors</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> dart unit tests failures/errors</li>
</ul>
<p dir="auto">ci mode:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> typescript compilation error</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> traceur compilation error</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> karma browser test failure/error (<code class="notranslate">gulp test.unit.js</code>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> jasmine test failure/error (<code class="notranslate">gulp test.unit.cjs</code>)</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> ts2dart errors</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> dart unit tests failures/errors</li>
</ul>
<p dir="auto">WIP branch resolving some errors: <a href="https://github.com/angular/angular/compare/master...IgorMinar:tripple-errors?expand=1">https://github.com/angular/angular/compare/master...IgorMinar:tripple-errors?expand=1</a></p>