只有第一個本地的DOM元素

我一直在玩弄聚合物1.0了一下，有這個基本的HTML文件：只有第一個本地的DOM元素

<head> 
    <link rel="import" href="bower_components/polymer/polymer.html"/> 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> 
    </script> 
</head> 
<body> 
    <dom-module id="photo-view"> 
    <template> 
     <p>Photo <span>{{basePic}}</span> goes here with filters 
     [<span>{{filters}}</span>]</p> 
    </template> 

    <script> 
     var PhotoView = Polymer({ 
     is: 'photo-view', 
     properties: { 
      basePic: String, 
      filters: { type: Array, value: function() { return []; } } 
     } 
     }); 
    </script> 
    </dom-module> 

    <dom-module id="photo-open"> 
    <template> 
     <button>Click me to open a photo!</button> 
    </template> 

    <script> 
     var PhotoOpen = Polymer({ 
     is: 'photo-open', 
     properties: { 
      picture: { type: String, notify: true } 
     } 
     }); 
    </script> 
    </dom-module> 

    <dom-module id="photo-editor"> 
    <template> 
     <photo-view base-pic="{{picture}}"/> 
     <photo-open picture="{{picture}}"/> 
    </template> 

    <script> 
     var PhotoEditor = Polymer({ 
     is: 'photo-editor', 
     properties: { 
      picture: { type: String, value: 'xyz.jpg' } 
     } 
     }); 
    </script> 
    </dom-module> 

    <photo-editor/> 
</body>

現在，我希望這表明的話Photo xyz.jpg goes here with filters []，其次是該按鈕說Click me to open a photo!。唯一的問題是，只有photo-editor中的第一個本地DOM元素顯示！例如，現在只有photo-view部分顯示。如果我把上面的photo-open像photo-view：

<dom-module id="photo-editor"> 
    <template> 
    <!-- Swapped order here --> 
    <photo-open picture="{{picture}}"/> 
    <photo-view base-pic="{{picture}}"/> 
    </template> 

    <script> 
    ...

那麼只有按鈕顯示，而不是文字。我究竟做錯了什麼？我一直在查看文檔，我看不到任何明顯的問題。 Chrome開發工具也沒有錯誤。

來源

2015-11-03 refi64

它與標準的關閉標籤一起工作嗎？即？ –

自定義元素必須有結束標記。

void元素是一個元素，其內容模型在任何情況下都不允許它具有內容。空元素可以有屬性。

以下是在HTML空隙元素的完整列表：

區域，基，BR，山口，命令，嵌入，小時，IMG，輸入，密鑰生成，鏈接，間位，PARAM，源，跟蹤，WBR

這就是爲什麼你得到你的代碼出現意外結果的原因。

來源

2015-11-04 04:39:22

只有第一個本地的DOM元素

回答

相關問題