How to render shadow DOM in a polymer custom element

Question

I'm having a hard time getting my polymer custom element to render content within a container <div> without the <div> showing up in the light DOM.

<polymer-element name="impress-slide" constructor="ImpressSlide" attributes="exitAnimation entryAnimation">
        <link rel="stylesheet" href="animate-custom.css">
        <template>
            <style type="text/css">
                ...
            </style>
            <div>
                <content></content>
            </div>
        </template>
        <script type="text/javascript">
                ...
        </script>
</polymer-element>

renders as

<impress-slide>
     <div> (Content) </div>
</impress-slide>

Can anyone give me some insight into how I can render the containing <div> in shadow DOM?

Answer 1

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.

Answer 2

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