1

一个简单的嵌套polymer-element在另一个内部将不会显示：

索引.html

<!DOCTYPE html>
<html>
    <head>
        <script src="lib/polymer.min.js"></script>
        <link rel="import" href="elements/indx-grid.html">
        <link rel="import" href="elements/indx-griditem.html">
        <title>INDX-polymer</title>
    </head>
    <body>
        <indx-grid>
            <indx-griditem></indx-griditem>
        </indx-grid>
    </body>
</html>

indx-grid.html

<polymer-element name="indx-grid">
<template>
    <style>
        @host {
            :scope {
                display: block;
                margin: 20px;
                border: 2px solid #E60000;
                background: #CCC;
                height: 500px;
            }
        }
    </style>
</template>
<script>
    Polymer('indx-grid');
</script>
</polymer-element>

indx-griditem.html

<polymer-element name="indx-griditem">
    <template>
        <style>
            @host {
                :scope {
                    display: block;
                    margin: 10px;
                    border: 1px solid #000;
                    border-radius: 3px;
                    background: #FFF;
                    width: 100px;
                    height: 100px;
                }
            }
        </style>
    </template>
    <script>
        Polymer('indx-griditem');
    </script>
</polymer-element>

奇怪的是，虽然我可以在 Chrome 的开发人员工具中看到它，并且 CSS 属性都是正确的，但在使用 Chrome 开发工具检查它时，该元素不会显示，甚至没有“大小工具提示”。

有人对这里的问题有任何线索吗？

谢谢

4

1 回答 1

6

您需要<content> 1才能将<indx-griditem>("light DOM") 引入<indx-grid>的影子 DOM。

演示：http: //jsbin.com/eRimiJo/2/edit

额外提示：您还可以noscript在未设置原型的 Polymer 元素上使用（例如，仅调用Polymer('element-name');

于 2013-08-28T17:28:21.077 回答