只有第一个本地 DOM 元素与 Polymer 一起显示

Question

我一直在玩弄 Polymer 1.0，并且有这个基本的 HTML 文件：

<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 devtools 中也没有错误。

Answer 1

自定义元素必须有结束标签。

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

The following is a complete list of the void elements in HTML:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

这就是您在代码中得到意外结果的原因。

只有第一个本地 DOM 元素与 Polymer 一起显示

Only first local DOM element showing with Polymer

html

polymer

polymer-1.0