如何在聚合物自定义元素中呈现阴影DOM

Question

我很难让我的聚合物自定义元素在容器<div>呈现内容，而在浅DOM中没有显示<div> 。

<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>

呈现为

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

谁能给我一些有关如何在阴影DOM中渲染包含的<div>见解？

Answer 1

这取决于您使用的浏览器和版本。 其中一些具有旧版本的Shadow DOM规范，因此Polymer必须对其进行填充，而不是本地使用它来获取所需的功能。

我正在使用Chrome 33.0.1750.22开发人员，除非我在about:flags打开“启用实验性Web平台功能”标志，否则Shadow DOM仍为我填充。

Answer 2

包括

  <script>
        window.Polymer = {
          dom: 'shadow',
          lazyRegister: true
        };
  </script>
  <link rel="import" href="./bower_components/polymer/polymer.html">

在聚合物导入之前，以使自定义元素能够在阴影dom内渲染，也称为#shadow-root