Question

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

的index.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开发工具检查时，该元素将无法显示，甚至没有“大小工具提示”。

有人对此问题有任何疑问吗？

由于

Answer 1

您需要<content> 1将<indx-griditem>（“轻量级DOM”）引入<indx-grid>的影子DOM。

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

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

嵌套的聚合物元素没有出现？

1 个答案: