title: Can you use a style tag within a style tag?
body: <p>Hey I'm using Styled Components for css handling in a design system library.
  I'm having trouble with consuming apps not being able to override our component's css without using <code>!important</code>.</p>
  <p>The problem stems from my styled-components injecting it's stylesheet tag at the end of the head.
  By moving their style tags back I was able to let consuming apps easily override my styles.</p>
  <p>This is my workaround for this -</p>
  <pre><code>let targetStylesheet: HTMLStyleElement;
  function createLowPriorityStylesheet() {
    const stylesheet = document.createElement('style');
    stylesheet.setAttribute('type', 'text/css');
    document.getElementsByTagName('head')[0].prepend(stylesheet);
  
    return stylesheet;
  }
  
  ...
  
  if (!targetStylesheet &amp;&amp; !isTest()) {
      targetStylesheet = createLowPriorityStylesheet();
  }
  
  return (
      &lt;StyleSheetManager target={targetStylesheet}&gt;
        &lt;MyComponent /&gt;
      &lt;/StyleSheetManager&gt;
    );
  </code></pre>
  <p>I'm creating an <code>&lt;svg&gt;</code> tag and <strong>pre</strong>pending it to the head, and styled components will inject <code>&lt;style&gt;</code> tags as children of the svg tag I created.</p>
  <p>This solution seems to work fine but I couldn't find information saying it's a valid approach or anyone talking about why you shouldn't do this.</p>
  <p>Are there any downsides to this approach?</p>