Add style import to make it work in shadow dom

[TimvdLippe]

This ports the current styling of prism.css to a style module in order to make it work in shadow dom.

<link rel="import" href="../bower_components/prism-element/prism-style-import.html">
<style is="custom-style" include="prism-styles"></style>

results with shadow dom in

Fixes #14

[TimvdLippe]

One note: This also requires a change in marked-element if you use <script type="text/markdown">. Works just fine with <div class="markdown-html"></div>

[notwaldorf]

Hmm, won't this need a change in marked-element, though? Or a change in prism-import.html, which still imports the css styles, and shouldn't.

[TimvdLippe]

The following example styles as expected:

<link rel="import" href="../../bower_components/marked-element/marked-element.html">
<link rel="import" href="../../bower_components/prism-element/prism-style-import.html">

<dom-module id="element-using-prism">
  <template>
    <style include="prism-styles"></style>
    <marked-element>
      <div class="markdown-html"></div>
      <script type="text/markdown">
      # My Markdown
      </script>
    </marked-element>
  </template>
</dom-module>

The prism-highlighter is placed on a central place in my application, but can be placed inside the <template> too. A modification to the existing prism-import would I think result in a breaking change so therefore I did not make this change.

[notwaldorf]

@FredKSchott passing the hot potato to you on this one too, since you own this element :)

[FredKSchott]

Looking at this now...

[FredKSchott]

@TimvdLippe this looks great, I was playing around with prism and the shadow DOM a few weeks ago and ran into the same problem.

With a small look into the future, can we give the style a more extensible module & file name? Something like prism-theme-default would help encourage building custom themes like prism-theme-xxx & prism-theme-yyy.

[TimvdLippe]

Done :+1:

[FredKSchott]

Great, can change the filename as well?

[TimvdLippe]

Oops sorry. Yes it has been renamed. In the web editor right now, so missed that one ;)

[FredKSchott]

np, thanks @TimvdLippe!

[arthurevans]

So I was trying to add this to iron-doc-viewer, and it occurred to me that the idea of exposing a style module as a theme just pushes the problem downstream. That is, if you have an element like iron-doc-viewer that uses prism-element for highlighting, it needs to import the default theme itself, so there's no way for anyone using iron-doc-viewer to change that theme.

Would it be possible for each of the rules in the prism style import to have a custom mixin, so these could be styled from the outside?

[FredKSchott]

Would custom mixins solve that problem? Wouldn't iron-doc-viewer need to create mixins of its own to map down to the prism-element mixins?

Either way that was how I tackled this when I last played around with prism. You can see my solution here: https://github.com/FredKSchott/super-code/blob/0f4f72ac6fc676b492e627bdf5459a137388acc6/super-code/super-code.html#L143