<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">I have an angular app where am using a webcomponent based on custom elements V0 specification.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;custom-page&gt;
    &lt;p&gt;This is child element inside my custom page&lt;/p&gt;
    &lt;step&gt; 
      &lt;custom-input-element&gt;&lt;/custom-input-element&gt;
    &lt;/step&gt;
    &lt;step&gt;&lt;/step&gt;
&lt;/custom-page&gt;"><pre class="notranslate"><code class="notranslate">&lt;custom-page&gt;
    &lt;p&gt;This is child element inside my custom page&lt;/p&gt;
    &lt;step&gt; 
      &lt;custom-input-element&gt;&lt;/custom-input-element&gt;
    &lt;/step&gt;
    &lt;step&gt;&lt;/step&gt;
&lt;/custom-page&gt;
</code></pre></div>
<p dir="auto">Unable to get access to child elements of custom element "custom-page" in attachedCallBack (lifecylce callback of webcomponents custom element) in the webcomponent.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Angular needs to provide a way for the webcomponent to access its child elements.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="https://plnkr.co/edit/SGndyIXp8alqaSP4Av5F?p=preview" rel="nofollow">https://plnkr.co/edit/SGndyIXp8alqaSP4Av5F?p=preview</a></p>
<p dir="auto">Please look into the console message after -  "Accessing child Nodes".<br>
On the first preview, it might look like the node references are resolved, please stop and re-run the plunker preview to reproduce the issue</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
I'm trying to integrate ChartIQ library which has HTML Custom Elements to my angular 2 application.<br>
Some of these elements have logic in createdCallback, but when it is firing innerHTML of Custom element is empty.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
If I use Custom Elements without Angular, createdCallback is firing when the full element (with all childrens added into it) inserted into DOM.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/OW500u9fr27aVteo3zJh" rel="nofollow">http://plnkr.co/edit/OW500u9fr27aVteo3zJh</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
For now Angular 2 breaks some part of expected behavior of Custom Elements. It needs to be fixed to allow using Custom Elements in Angular apps.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 8, WebStorm, npm</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong><br>
2.2.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
Chrome 55</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong><br>
all</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
6.7.0</p>
</li>
</ul>