Style tags breaking examples.

[brandonreid]

I spent some time updating our version of livingcss, took quite a long time to figure out why the examples weren't rendering with the styles. Turns out it was because I had style tags in some of the examples.

/**
* @example
* <style>p.example { backround-color: gray; }</style>
* <div class="flex-container">
*   <p>Example Text</p>
* </div>
*/

Maybe this should just be documented, maybe an error should be thrown or maybe style tags should be supported (they can be pretty handy sometimes, but there are other ways to achieve this of course).

[straker]

Hu, I would have figured that would work. I'll have to look into why that is the case

[straker]

So I looked into it and style tags are supported. The issue is that Polymer adds an extra style scope to the examples so the styles don't leak into our out of the element. To fix this, you'll ether need to double up on the selector to increase the specificity, or add !important to override anything:

/**
* @example
* <style>p.example.example { background-color: gray; }p.example { background-color: gray !important }</style>
* <div class="flex-container">
*   <p>Example Text</p>
* </div>
*/

[brandonreid]

Huh, it must have just been an issue with my particular setup. For me it wasn't that the styles in the style tag weren't applying, but the presence of the tag was actually breaking other stuff.

Thanks for looking into it @straker !