search

addyosmani / prism-js

A Polymer element for syntax highlighting with Prism.js
149 stars 15 forks source link

Scoped styling #8

Closed thomasmattheussen closed 10 years ago

thomasmattheussen commented 10 years ago

To my understanding, document level CSS shouldn't bleed into the shadow DOM.

Yet, the prism theme css file is placed at document level. This works because polymer doesn't protect against this, as stated in the docs:

"Because polyfilling the styling behaviors of Shadow DOM is difficult, Polymer has opted to favor practicality and performance over correctness. For example, the polyfill’s do not protect Shadow DOM elements against document level CSS."

Therefore, when turning on "Enable experimental Web Platform features" under chrome://flags, the syntax highlighter doesn't work. I'm thinking because polymer is not polyfilling at that point?

addyosmani commented 10 years ago

The polyfills have a ton of weirdness around scoped styling at the moment. I'd actually initially baked in support for per-instance theming with dynamic import of external stylesheets. Unfortuantely this was causing related issues where it would either work/not work based on whether you had the experimental platform features turned on.

I'll circle back with the Polymer team and try to figure out what our current recommendations are around having platform features turned on with the alpha.

thomasmattheussen commented 10 years ago

Ok, cool. Thanks! :)

addyosmani commented 10 years ago

Theming, line numbers and line highlights are now working in Canary: http://addyosmani.github.io/prism-js/components/prism-js/demo.html with the newest version in master.