<p dir="auto">Lets say you have the following:</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="library example;

import 'dart:html';
import &quot;package:angular2/angular2.dart&quot;;
import &quot;package:angular2/src/reflection/reflection.dart&quot; show reflector;
import &quot;package:angular2/src/reflection/reflection_capabilities.dart&quot; show ReflectionCapabilities;

main() {
  reflector.reflectionCapabilities = new ReflectionCapabilities();
  bootstrap(MyApp);
}

@Component(selector: &quot;my-app&quot;, host: const {'foo': 'bar'})
@View(template: '&lt;div&gt;hello&lt;/div&gt;')
class MyApp {
}"><pre class="notranslate"><span class="pl-k">library</span> example;

<span class="pl-k">import</span> <span class="pl-s">'dart:html'</span>;
<span class="pl-k">import</span> <span class="pl-s">"package:angular2/angular2.dart"</span>;
<span class="pl-k">import</span> <span class="pl-s">"package:angular2/src/reflection/reflection.dart"</span> <span class="pl-k">show</span> reflector;
<span class="pl-k">import</span> <span class="pl-s">"package:angular2/src/reflection/reflection_capabilities.dart"</span> <span class="pl-k">show</span> ReflectionCapabilities;

<span class="pl-en">main</span>() {
  reflector.reflectionCapabilities <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-c1">ReflectionCapabilities</span>();
  <span class="pl-en">bootstrap</span>(<span class="pl-c1">MyApp</span>);
}

<span class="pl-k">@Component</span>(selector<span class="pl-k">:</span> <span class="pl-s">"my-app"</span>, host<span class="pl-k">:</span> <span class="pl-k">const</span> {<span class="pl-s">'foo'</span><span class="pl-k">:</span> <span class="pl-s">'bar'</span>})
<span class="pl-k">@View</span>(template<span class="pl-k">:</span> <span class="pl-s">'&lt;div&gt;hello&lt;/div&gt;'</span>)
<span class="pl-k">class</span> <span class="pl-c1">MyApp</span> {
}</pre></div>
<p dir="auto">It will not set the attribute <code class="notranslate">foo</code> onto the <code class="notranslate">my-app</code> element that lives in your html. It does actually set the attribute on a <code class="notranslate">my-app</code> element, just not the one in the dom. It appears there is some sort of temporary element being created and the attribute is being set on that one.</p>
<p dir="auto">Repro: <a href="https://gist.github.com/jakemac53/795c4f1af486ccfb0014">https://gist.github.com/jakemac53/795c4f1af486ccfb0014</a></p>
<p dir="auto">This seems to be caused by the fact that we are creating a second temporary host element for the root component and calling <code class="notranslate">setAttribute</code> <em>before</em> we attach content to the target host element.</p>
<p dir="auto">/cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jakemac53/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jakemac53">@jakemac53</a></p>