2013-08-28 7 views
1

простой вложенной 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 Дев инструментов.

У кого-нибудь есть информация о проблеме здесь?

Благодаря

ответ

6

Вам нужно <content>1 принести в <indx-griditem> ("светло-DOM") в теневом DOM <indx-grid> «s.

Демо: http://jsbin.com/eRimiJo/2/edit

Дополнительный совет: вы можете также использовать noscript на полимерные элементы, которые не установки прототипа (например, только называют Polymer('element-name');

+1

Great еще применяется к полимеру 1.0 – Raffaeu

 Смежные вопросы

  • Нет связанных вопросов^_^