title: Create nested custom angular web components
body: <p>I am creating multiple custom web components in order to reuse them in multiple projects, which works fine. Since we want them originally to be independent, I use <code>encapsulation: ViewEncapsulation.Native</code>. So, each one of those web components is creating it's own shadow-root which contains the template of the component. </p>
  
  <p>I am trying now to create more complex web components which are using ones that I already created earlier. As soon as I build, package and run this on a http-server, it doesn't work and chrome displays this error in the console : <code>Uncaught DOMException: Failed to execute 'createShadowRoot' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.</code> </p>
  
  <p>So after searching a bit on the internet, I found out that it isn't allowed to have nested shadow-roots. Since every custom web component is creating its own shadow-root, how can I manage to re-use my components in more complex ones ?</p>
  
  <p>[Edit / Additionnal infos]</p>
  
  <p>I use </p>
  
  <pre><code>const myCustomEl= createCustomElement(CustomElComponent, { injector }); 
  </code></pre>
  
  <p>and then </p>
  
  <pre><code>customElements.define('custom-el', myCustomEl); 
  </code></pre>
  
  <p>and then I build it and package it with </p>
  
  <pre><code> jscat ./dist/framework/runtime.js ./dist/framework/polyfills.js ./dist/framework/scripts.js ./dist/framework/main.js &gt; miZipFramework.js.gz 
  </code></pre>
  
  <p>before I run it on my http-server</p>