<p dir="auto">Describe what you were doing when the bug occurred:<br>
1.viewing profiler commits</p>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.11.0-39713716aa</p>
<p dir="auto">Call stack: at updateTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20505:53)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20397:26)<br>
at ProfilingCache_ProfilingCache.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20951:11)<br>
at CommitRankedAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35713:33)<br>
at Rh (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13245:7)<br>
at Ci (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13944:7)<br>
at uk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16725:86)<br>
at tk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16245:11)<br>
at qk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16237:23)<br>
at jk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16221:5)</p>
<p dir="auto">Component stack: at CommitRankedAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35696:34)<br>
at div<br>
at div<br>
at div<br>
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29121:3)<br>
at Profiler_Profiler (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37243:34)<br>
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30035:5)<br>
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30157:5)<br>
at div<br>
at div<br>
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34264:3)<br>
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25356:3)<br>
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25963:3)<br>
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30300:3)<br>
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37639:3)</p>
<p dir="auto">Briefly spoke to <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/petehunt/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/petehunt">@petehunt</a> about this. Tracking it with an issue.</p>
<p dir="auto">There are times when having multiple insertion points would be useful. The old Web Components spec was looking to do this with the <code class="notranslate">select</code> attribute of <code class="notranslate">content</code> - <a href="http://www.w3.org/TR/components-intro/#insertion-points" rel="nofollow">http://www.w3.org/TR/components-intro/#insertion-points</a>. I'm not sure what the current W3C plans are.</p>
<p dir="auto">Pete said that this could be done for now by passing other children in as props. But it feels like a hack.</p>
<p dir="auto">Riffing on that old spec's idea, something vaguely like this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
  &lt;div class=&quot;header&quot;&gt;
    { select(this.props.children, '.title') }
  &lt;/div&gt;
  { this.props.children }
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">header</span>"<span class="pl-kos">&gt;</span>
    { select(this.props.children, '.title') }
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  { this.props.children }
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Where the <code class="notranslate">.title</code> string is a CSS selector, and any matching elements are removed from the <code class="notranslate">children</code> to avoid duplicate insertion.</p>