title: Creating a web page plugin. How to include css and render elements?
body: <p>I'd like to create a web page plugin (not a jQuery plugin) that can be installed by the webmaster by pasting a few lines of code into their HTML.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;script src=".../plugin.js" /&gt;
  &lt;script&gt;window.plugin(parent_element, {some: "config"});&lt;/script&gt;
  </code></pre>
  
  <p>Disqus does this:</p>
  
  <pre><code>&lt;div id="disqus_thread"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
      var disqus_shortname = 'asdasdsadad'; // required: replace example with your forum shortname
  
      /* * * DON'T EDIT BELOW THIS LINE * * */
      (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      })();
  &lt;/script&gt;
  &lt;noscript&gt;Please enable JavaScript to view the &lt;a href="http://disqus.com/?ref_noscript"&gt;comments powered by Disqus.&lt;/a&gt;&lt;/noscript&gt;
  </code></pre>
  
  <p>(I'm not sure why Disqus needs to run Javascript to add Javascript to the header.)    </p>
  
  <p>The plugin will create a new html element and require css for that element.</p>
  
  <p>I'm using <a href="http://youmightnotneedjquery.com/" rel="nofollow">http://youmightnotneedjquery.com/</a> to avoid dependency on jQuery.</p>
  
  <p>I'm only targeting IE9+, FF and Chrome.</p>
  
  <p>What is common practise for loading css from a <code>&lt;script&gt;</code> tag?</p>
  
  <p>(I really want the webmaster to be able to override the plugin's css, to style it.)</p>
  
  <p>What is the best way to produce the html?  Elements, raw strings, functions or some form of templating library?</p>