How to render shadow DOM in a polymer custom element

Issue

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?

Solution

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.

Answered By – CletusW

Answer Checked By – Mildred Charles (FlutterFixes Admin)