<h3 dir="auto">Version</h3>
<p dir="auto">2.5.17</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/truefusion/hLzg2w8b/" rel="nofollow">https://jsfiddle.net/truefusion/hLzg2w8b/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Extend an Array.<br>
Instantiate the new class.<br>
Assign it to a component property that is observable by Vue.<br>
Access the property in the console.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The reference to maintain its instantiated class.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The instantiated class is mutated into a regular array.</p>
<hr>
<p dir="auto">Tested in latest version of Chrome. Not sure about the rest (but for my purposes the other browsers are irrelevant for my project).</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.13</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/anon/pen/ppWdEX?editors=1010" rel="nofollow">https://codepen.io/anon/pen/ppWdEX?editors=1010</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Seems that Vue doesn't consider what happens when a Vue component is mounted inside of a shadow root.</p>
<p dir="auto">The component's style gets placed into the <code class="notranslate">&lt;head&gt;</code> of the web app, and therefore the style is not able to style the elements generated by the Vue component that are inside the shadow root.</p>
<p dir="auto">Here's a reproduction:</p>
<p dir="auto">This pen works:</p>
<p dir="auto"><a href="https://codepen.io/saawsan/pen/jayzeq" rel="nofollow">https://codepen.io/saawsan/pen/jayzeq</a></p>
<p dir="auto">and this one doesn't:</p>
<p dir="auto"><a href="https://codepen.io/anon/pen/ppWdEX" rel="nofollow">https://codepen.io/anon/pen/ppWdEX</a></p>
<p dir="auto">As you can see the app works (click the buttons) but nothing is styled.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The app should be styled.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">It isn't because the styles are placed in the <code class="notranslate">&lt;head&gt;</code> and they don't propagate into the shadow root.</p>
<hr>
<p dir="auto">Is there a way to configure Vue to place the <code class="notranslate">&lt;style&gt;</code> element as a sibling of the rendered output, or somewhere else? I need the generated <code class="notranslate">style</code> to be placed inside the shadow root, otherwise it has no effect (<code class="notranslate">scoped</code> or not).</p>