How to render shadow DOM in a polymer custom element
It depends on what browser & version you're using. Some of them have old versions of the Shadow DOM spec, and so Polymer has to polyfill it instead of using it natively to get the features it needs.
I'm using Chrome 33.0.1750.22 dev and Shadow DOM is still polyfilled for me unless I turn on the "Enable experimental Web Platform features" flag in about:flags.
Include
<script> window.Polymer = { dom: 'shadow', lazyRegister: true }; </script> <link rel="import" href="./bower_components/polymer/polymer.html">before polymer import to enable custom elements to render inside shadow dom aka #shadow-root