<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 =&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
[ ] 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><br>
In Hybrid mode (when bootstrapped using upgradeAdatper.bootstrap()), the <strong><code class="notranslate">&lt;ng-content select ='' &gt;</code></strong> attribute on the downgraded ng2 component is not honored. it seems that select='' expression is ignored completely and all the light DOM child elements are included.</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
In Hybrid mode, the <code class="notranslate">&lt;ng-content select=''&gt;</code> attribute should be honored and should include only those DOM element matching the 'select' criteria.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Here is the plunker <a href="https://plnkr.co/edit/L7Flah?p=preview" rel="nofollow">https://plnkr.co/edit/L7Flah?p=preview</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">It breaks the desired ng2 component behavior in hybrid mode.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.1</li>
<li><strong>Browser:</strong> [Chrome XX ]<br>
Tested in Chrome Version 51.0.2704.103 m</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5 | Dart]<br>
<a href="https://code.angularjs.org/tools/typescript.js" rel="nofollow">https://code.angularjs.org/tools/typescript.js</a></li>
</ul>
<h3 dir="auto">Bug Report</h3>
<p dir="auto">Angular version: 2.0.0-beta.11<br>
Browser: [all]<br>
Language: [Typescript]</p>
<h3 dir="auto">Description</h3>
<p dir="auto">When downgrading an Angular 2 component to use in an Angular 1 application, the downgraded directive crashes if the original component uses multi-projection with more than 1 slot, for instance:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ng-content select=&quot;.foo&quot;&gt;&lt;/ng-content&gt;
&lt;ng-content select=&quot;.bar&quot;&gt;&lt;/ng-content&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ng-content</span> <span class="pl-c1">select</span>="<span class="pl-s">.foo</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">ng-content</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">ng-content</span> <span class="pl-c1">select</span>="<span class="pl-s">.bar</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">ng-content</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">The error thrown is <code class="notranslate">Error: The component {XXX} has {N} &lt;ng-content&gt; elements, but only 1 slots were provided.</code></p>
<h3 dir="auto">Reproduce</h3>
<p dir="auto">See <a href="http://plnkr.co/edit/JvjE9fodGnauwQNO7j5v?p=preview" rel="nofollow">this plunker</a> for a minimal example that reproduces the bug.</p>
<p dir="auto">Thanks.</p>